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)，親測可以！