前后端跨域问题

现在我也是2024-09-12 20:36

先直接在后端加上@CrossOrigin看行不行，加了之后发现莫名奇妙微服务访问得了，网关却无法访问，但postman测试通过，所以觉得还是跨域的问题，最后再配置前端的跨域配置，这里使用的是vue3，再vue.config.js中加入了proxy的配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy: {
      '/api': {
        target: 'http://localhost:50000', // 目标服务器地址
        changeOrigin: true, // 是否改变源地址
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
})

第一个/api指匹配所有以/api开头的请求，第二个^/api,也就是属性的字面意思，正则表达式将/api选出来并替换为另一个地址，这里写的空字符串，结果就是删掉了/api，在请求时，写的/api/user/login,实际上请求的地址是

http://localhost:50000/user/login