面试 - 跨域的原因？解决？_跨域是因为ajax引擎-优快云博客

本文链接：https://blog.youkuaiyun.com/xiannverhaha/article/details/126481554

跨域问题源于浏览器的安全策略，ajax引擎会拦截非同源的响应。解决跨域的方法包括设置代理，如通过一个代理将前端3000端口请求转发到5000端口服务器。但这种方式存在局限，无法配置多个代理。为解决这个问题，可以进一步配置多个代理，通过创建代理文件并在setupProxy.js中定义代理规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原因？
产生跨域的本质是ajax引擎拦截住非同源的响应；（请求能发给server,但拦截了server给的响应）
解决？
（注：本地端口是3000，代理的端口是3000（因为3000端口开着脚手架的同时，也开着一个非常微小的服务器），跨域的server是5000）

方案1：一个代理：

"proxy":"http://localhost:5000" //在package.json文件里添加  然后在axios请求 里的地址由5000改为3000;

原理：先从前端找文件（本地的public实际上是3000的根路径，比如/3000/index.html），找不到再从5000端口找
缺点：无法配置多个代理 (就是3000没有的东西只能找5000要，万一5001的端口也有接口需要请求，这个办法就没法用了)

方案2：配置多个代理

第一步：创建代理文件

在src下创建一个叫setupProxy.js的文件

第二步:在setupProxy.js文件中编写代理规则（注意：文件里面用的不是es6而是cjs语法规范）

const proxy = require("http-proxy-middleware"); //安装脚手架时，就已经下载好了
module.exports = function (app) {
  app.use(
    //多个参数，配置多组代理
    proxy("/api1", {
      //在axios的url上要带上api1，不写就是不走代理，http://localhost:3000/api1/students
      target: "http://localhost:5000",
      changeOrigin: true, //控制服务器收到请求头中的host（表示请求从哪里发出的）的值，true是5000，false是3000；
      pathRewrite: { "^/api1": "" }, //重写请求路径（必须，不然路径不是/studnts,而是/api1/students，报404）
    }),
    proxy("/api2", {
      target: "http://localhost:5001",
      changeOrigin: true,
      pathRewrite: { "^/api2": "" },
    })
  );
};