nginx docker 解决前后端跨域问题

环境：mac for docker

前端： vue

后端： django

解决什么问题： 解决前后端跨域问题

 

1、首先通过docker run 运行临时nginx容器，将下面需要映射的文件及目录，全部通过docker cp 命令复制出来

       然后将/opt/nginx/conf.d/default.conf文件， 文件内容修改如下：

server {
    listen       80;
    #listen  [::]:80;
    server_name  host.docker.internal, localhost, 127.0.0.1;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    keepalive_timeout   70;
		
    gzip on;
    gzip_min_length 200;
    gzip_buffers 4 16k;
    gzip_comp_level 6;
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/json;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
    gzip_proxied any;
		
    # 配置django ，如果符合 /api/ 开头的url，就转发到http://127.0.0.1:8000
    location /api/ {
       proxy_pass http://host.docker.internal:8000;
       proxy_pass_request_headers      on;
       proxy_set_header Host $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }
		
    # 配置vue，默认的所有的请求，都转发到  http://127.0.0.1:8080;  比上面多了几个配置，因为要支持websocket
    location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_pass http://host.docker.internal:8080;
        proxy_pass_request_headers      on;
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
     }




    #location / {
    #    root   /usr/share/nginx/html;
    #    index  index.html index.htm;
    #}

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

　　

2、启动docker-nginx, 将容器内80端口映射到宿主机的8001端口（8001未使用状态）:

version: '3'
services:
  nginx:
    container_name: nginx
    image: nginx:latest
    ports:
    - 8001:80
    #network_mode: host
    volumes:
    - /opt/nginx/nginx.conf:/etc/nginx/nginx.conf
    - /opt/nginx/conf.d:/etc/nginx/conf.d
    - /opt/nginx/log:/var/log/nginx
    restart: always

 

3、本地启动vue（默认是8080端口）和django（默认是8000端口）

4、此时nginx 开始监听本地的8000端口和8080端口，所以打开前后端工程都要用8001了：

http://127.0.0.1:8001/

    前端工程中，调用后端的接口变量，就需要配置成如下了：

let portUrl = "http://127.0.0.1:8001/api/";

 

需要注意的是：上面2个地址要一致，要么都是127.0.0.1要 么都是localhost，否则，还是会存在跨域问题

 

好的，现在应该没有跨域问题了，可以愉快的开发了。

另外，如果nginx在局域网中其他的服务器上，也是可以代理到本地服务的，需要将nginx配置文件中的proxy_pass配置成本地的局域网ip(192.168.x.x)，亲测可以！