码迷,mamicode.com
首页 > 其他好文 > 详细

nginx docker 解决前后端跨域问题

时间:2020-08-25 15:58:52      阅读:100      评论:0      收藏:0      [点我收藏+]

标签:环境   地址   params   调用   class   没有   修改   out   djang   

环境: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 docker 解决前后端跨域问题

标签:环境   地址   params   调用   class   没有   修改   out   djang   

原文地址:https://www.cnblogs.com/pyse/p/13533568.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!