vue proxy代理 + nginx 处理跨域运维萝卜砸大坑-

前言： 身为一名前端菜鸟，之前一直未关注后端对于跨域的配置，这不，终于又踩到坑了，由于nginx未配置代理转发，所以前端的处理一直都是针对开发环境和生产环境做处理

// 错误 的代理配置，同样启用proxy代理，并在axios配置文件中根据开发环境配置请求，这样在开发环境中可以正常请求，但是在生产环境中由于直接请求，浏览器会进行预请求OPTIONS
http预请求options,这是浏览器对复杂跨域请求的一种处理方式,在真正发送请求之前,会先进行一次预请求,就是我们刚刚说到的参数为OPTIONS的第一次请求,他的作用是用于试探性的服务器响应是否正确,即是否能接受真正的请求,如果在options请求之后获取到的响应是拒绝性质的,例如500等http状态,那么它就会停止第二次的真正请求的访问

const baseUrlHash = {   production: 'https://test.admin.xxx.com',   development: '/api' } const BASE_URL = baseUrlHash[process.env.NODE_ENV] axios.defaults.baseURL = BASE_URL 

正确 的代理配置
vue.config.js 配置proxy代理，不需要做别的配置，只需nginx转发后端接口地址

module.exports = {   devServer: {     proxy: { '/api': {         target: 'https://test.admin.xxx.com',         changeOrigin: true,         ws: true,         pathRewrite: { '^/api': '' } }, '/http': {         target: 'https://test.xxx.com',         changeOrigin: true,         ws: true,         pathRewrite: { '^/http': '' } } } } } 

axios 配置文件，根据需求是否添加默认前缀

axios.defaults.baseURL = '/api' 

/etc/nginx/conf.d project.conf 配置nginx —重点

server {     listen 80;     server_name  pcadmin.xxx.com;     location / {         try_files $uri $uri/ /index.html;         #proxy_pass http://localhost:8089; // 项目地址         root /home/xfw/xfw-admin-html/dist;         index  index.html index.htm; } // 转发后端接口地址---重点     location ^~ /api/ {         proxy_pass http://test.admin.xxx.com/; }     location ^~ /http/ {         proxy_pass http://test.xxx.com/; } } 

nginx未配置转发后端接口地址bug:
We’re sorry but XX doesn’t work properly without JavaScript enabled