nginx解决跨域问题

一、开发环境跨域：请参考 webpack解决跨域问题

二、生产环境跨域：

1、将打包后的dist文件夹推送到服务器。

scp -r dist root@192.168.10.202:/data/nginx/

2、安装nginx

yum install nginx

3、修改nginx.conf文件

server {
        listen       8081;   # 监听端口
        server_name  ceshi;  #名称（随便写，不重要）
        root  /data/nginx/dist;  #项目路径    
        //重点。解决跨域问题
	    location /api/ {
		 proxy_pass http://192.168.10.202:80/api/;    #跨域接口地址
	    }
}

4、重启nginx

systemctl restart nginx.service

5、浏览器访问项目

http://192.168.10.202:8081/#/

补充：

1. 并不是所有的生产环境都存在跨域问题。只有当接口的协议、域名、端口，和生产环境不一致时，才需要在nginx中配置代理解决跨域问题。
2. 如果生产环境不存在跨域问题，需要在代码中配置生产环境的地址。
3. 如果生产环境存在跨域问题，则不能在代码中配置生产环境的地址，否则会影响到nginx中的配置。

 if (process.env.NODE_ENV == "development") {
    //开发环境。
    //如果开发环境不存在跨域问题，直接在这里配置地址就行。
    //如果开发环境存在跨域问题，这里不用配置，需要使用webpack来配置代理，解决跨域问题。
    axios.defaults.baseURL = "http://192.168.10.202:81";
  } else {
    // 生产环境
    axios.defaults.baseURL = "http://192.168.10.202:80";
  }