vue.config.js或webpack.config.js中设置proxy代理解决生产环境跨域

本地启动一个服务器,端口为9000

node server.js 

server.js文件

const http = require("http");

const app = http.createServer((req, res) => {

  if (req.url === "/api/testCors") {

    res.end("i just wanna be cool");

  }

});

app.listen(9000, "localhost", () => {

  console.log("localhost:9000开启服务");

});

vue组件

<script>
import axios from "axios";
export default {
  name: "Home",
  created() {
    axios.get("/api/testCors").then((res) => {
      console.log(res);
    });
  },
</script>

我们在"http://localhost:8080去请求"http://localhost:9000，端口不一样，肯定有跨域问题

如果是开发环境，我们可以通过devServer中的proxy这个配置来设置代理，解决跨域问题，但是它只在开发环境有效

vue.config.js文件设置proxy代理

module.exports = {
  devServer: {
​    port: 8080, // 本地跑的端口，默认是8080，
​    proxy: {
​      "/api": {  // 请求路径中含 /api
​        target: "http://localhost:9000", 目标服务器
​      },
​    },
  },
};

跨域是浏览器策略，对请求需要同源的限制，但是服务器之间没有跨域的问题

我们请求发送给devServer服务器，在由devServer服务器做一次转发，发送给数据接口服务器；请求发给devServer服务器不存在跨域（同源），而devServer请求是服务器与服务器之间，不存在跨域问题

这样就做到了http://localhost:8080/api/testCors请求http://localhost:9000/api/testCors的资源

在生产环境需要后端做些配置，比如nginx或者其他方式

配置多个代理，匹配的前缀一样时，会优先第一个匹配到的，如果前面不符合，才会走后面的代理
所以当匹配的前缀一样，需要把优先级高的放在前面
比如代理目的是：将 /api/hello 代理到 6000 端口，其他的 /api 代理到3000端口；
写法：需要将/api/hello放在 /api 前面，不然全部都会代理到 3000端口

const proxy = {
  "/api/hello": {
    target: "http://localhost:6000",
    pathRewrite: {
      //   发送请求时，请求路径重写；将 /api/xxxx  --> /xxxx(去掉api)
      "^/api": "",
    },
  },
  "/api": {
    target: "http://localhost:3000",
    pathRewrite: {
      "^/api": "",
    },
  },
};