VUE部署nginx解决跨域问题

VUE部署nginx解决跨域问题

• • Vue的代理跨域问题，需要确定的是在开发阶段可以使用，部署到服务器后出现请求失败的问题(404),如下图。
  • VUE配置的代理

Vue的代理跨域问题，需要确定的是在开发阶段可以使用，部署到服务器后出现请求失败的问题(404),如下图。

这是因为VUE在打包的过程中并没有把代理配置也进行打包，需要配置跨域代理，这里我使用的是服务器是nginx代理实现跨域问题。

先去百度上下载一个nginx，然后进入conf目录，打开nginx.txt配置文件，
找到如下配置

VUE配置的代理

devServer: {
       proxy: {
         '/request': {   //以request后缀请求
           target: '地址:端口',  //转发地址
           ws: true,
		      pathRewrite:{'^/request':'/'},   //把request 替换成/
           changeOrigin: true
         }
       }
     }

转换到对应的服务器的配置跨域如下

 server {
        listen       80;
        server_name  localhost;
 		#匹配请求头为 request，把request 换成/ 然后提交proxy_pass http这个指定地址
 		
		location ^~/request/ {
 		add_header Access-Control-Allow-Origin *;
                add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
		add_header Access-Control-Allow-Credentials true;
		proxy_set_header X-NginX-Proxy true;		
		rewrite    ^(.*)request(.*)$   $1/$2; break;
 		#root html/dist;
		proxy_pass http:这里是你的后台地址:端口号;
		index  index.html index.htm;

	}
		#匹配以/的请求 然后跳转到指定目录，
        location / {
        	#我这里是指定的是nginx的html目录下的项目
            root html/dist;
            index  index.html index.htm;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

以上配置就可以解决跨域代理问题