前端跨域解决方案

1.vue方案--在vue.config中进行配置

vue在启动之后，会开启一个本地服务器webpack-dev-server。本地服务器和后端服务器之间是不存在跨域的，因为跨域是浏览器行为。

本地服务器和浏览器之间是不存在跨域的，他们是相同的。所以，只需要在本地服务器上配置请求，把请求通过本地服务器发送并接收，然后把本地服务器收到的内容，渲染到浏览器页面。

const { defineConfig } = require("@vue/cli-service");

module.exports = defineConfig({
  transpileDependencies: true,

  // webpack-dev-server 相关配置
  devServer: {
    host: "localhost", //本地项目运行的地址
    // host: "0.0.0.0", //本地项目运行的地址
    port: 8084, //本地项目运行的端口


    https: false, //false关闭https，true为开启
    // 代理
    proxy: {
      // 把带有/api的请求地址全部转发到http://localhost:3000
      //  实际本地服务器请求的是：http://localhost:3000/api/xxxx
      // 本地的baseUrl不用填，为空即可。默认为本地项目运行的地址+端口。
      "/api": {
        target: "http://localhost:3000",  //后端服务器接口地址
        changeOrigin:true  //开启代理
      },

      // 如果后端提供的接口的地址中除了/api/xxx接口外，还有/get/xxx。
      "/get": {
        target: "http://localhost:3000",  //后端服务器接口地址
        changeOrigin:true  //开启代理
      },
    },
  }
});

来源：【vue脚手架配置跨域-哔哩哔哩】 https://b23.tv/36ByiEA

2.Nginx方案

location /api/ {  //请求前缀
    proxy_pass http://xxxxxx  后端接口的地址
}

多项目部署

【Nginx与跨域-哔哩哔哩】 https://b23.tv/0mYlOBb