react总结之axios（解决跨域）

无人与我粥可温

已于 2022-09-07 19:21:46 修改

阅读量2.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： react.js 文章标签： react.js

于 2022-09-07 18:15:18 首次发布

本文链接：https://blog.csdn.net/yjnain3066/article/details/126751098

react.js 专栏收录该内容

13 篇文章

订阅专栏

本文详细讲解了跨域的概念及其由来，并介绍了两种常见的解决方案：一种是在package.json中设置代理，适用于单一域名；另一种是通过setupProxy.js实现多域名代理。

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

文章目录

一、什么是跨域？

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。浏览器从一个域名的网页去请求另一个域名的资源时，出现域名、端口、协议任一不同，都属于跨域。

二、解决跨域

1.第一种

在package.json里面添加一行代码即可（这个方法只能写一个域名）

proxy：“你请求服务器的域名”

2.第二种

在src文件下创建一个setupProxy.js文件，在里面填写以下代码即可（这个方法可以填写多个域名）这里注意

const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = function (app) {
  app.use(
    createProxyMiddleware(
      "/api", //遇见/api-elm前缀的请求,就会触发该代理配置
      {
        target: "服务器域名", //请求转发给谁（能返回数据的服务器地址）
        changeOrigin: true, //控制服务器收到的响应头中Host字段的值
        secure: false,
        // pathRewrite: {
        //   "^/api": "",
        // }, //重写请求路径，保证交给后台服务器是正常地请求地址（必须配置）
      }
    )
  );
};