标签：环境 地址 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，否则，还是会存在跨域问题
好的，现在应该没有跨域问题了，可以愉快的开发了。
标签：环境 地址 params 调用 class 没有 修改 out djang
原文地址：https://www.cnblogs.com/pyse/p/13533568.html
