vue-vue3跨域问题梳理

1. 跨域问题现象

Access to XMLHttpRequest at 'http://127.0.0.1:9611/login' from origin 'http://localhost:6370' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如图：

2. 解决方式

1. 在vue工程中找到vue.config.js,在module.exports中进行配置

module.exports = {
  // publicPath: './',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: port,
    open: false,
    hot: true,
    overlay: {
      warnings: false,
      errors: true
    }
   ,
   // 跨域地址配置，地址重写配置
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9611/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

2. 在配置axios的请求响应文件中配置（根据自己定义）

const service = axios.create({
  baseURL: "/api",	// 与重写地址一直
  timeout: 10000, // 超时时间
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
})