vue proxy代理 + nginx 处理跨域

Malinda ·

更新时间:2024-11-14

· 780 次阅读

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

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

const baseUrlHash = {
  production: 'http://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: 'http://test.admin.xxx.com',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/http': {
        target: 'http://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