vue生产环境遇到跨域问题

开发环境下我们需要使用nginx做代理，例如接口为http://ip/api，我们则可以将api接口代理出去。

所用技术：docker，nginx。

讲一下逻辑：
1.vue项目打包，打包到dist文件夹下。
2.nginx做容器，并且代理/api接口。（其他接口就继续加location）
3.使用docker来启动nginx。

下面是nginx的配置：(保存为 web.conf 文件)

server {
	listen 80 default_server;
	listen [::]:80 default_server;
	client_max_body_size 10M;

	root /web;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name _;

    location / {
        root   /web;
        index  index.html index.htm;
    }

    location /api {
    	add_header 'Access-Control-Allow-Origin' '*';
        proxy_pass http://ip/api;
    }
}

我这里有一个写好的docker文件，可以根据自己所使用进行修改。

version: '2'
services:
    web:
        image: nginx:latest
        volumes:
            - ./web.conf:/etc/nginx/conf.d/mysite.template
            - ./dist:/web
        ports:
            - 80:80
        command: /bin/bash -c "envsubst < /etc/nginx/conf.d/mysite.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"

打开网站http://localhost/，即可，现在可以测试还存在有跨域请求。