react-解决 fetch 跨域问题：Access to fetch at xxx from origin yyy has been blocked by CORS policy

最新推荐文章于 2025-02-27 22:03:05 发布

哈！小白要成长！

最新推荐文章于 2025-02-27 22:03:05 发布

阅读量3.7w

点赞数 9

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/qq_41956139/article/details/106564357

版权

React 专栏收录该内容

10 篇文章

订阅专栏

1、报错

在这里插入图片描述

2、解决

方法一：修改 package.json

在 package.json 中添加代码

"proxy": "http://tingapi.ting.baidu.com" // 这是你要访问的域

然后重新运行，否则会报如下错误：修改了 package.json 需要重启
在这里插入图片描述
请求成功：

方法二：使用 http-proxy-middleware（常用）

安装

cnpm install http-proxy-middleware --save

配置：在 src 下新建一个 setupProxy.js ，添加如下代码

const proxy = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(
    'api',
    proxy({
      target: 'http://localhost:3100', // 你要访问的地址
      changeOrigin: true
    })
  )
}

重启遇到问题：
在这里插入图片描述
百度之后，在一篇博客中发现原来是 http-proxy-middleware 版本更新带来的问题

0.x.x版本的引用方式
const proxy = require('http-proxy-middleware');
1.0.0版本的引用方式
const { createProxyMiddleware } = require('http-proxy-middleware');

修改成以下，重启

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

module.exports = function (app) {
  app.use(
    'api',
    createProxyMiddleware({
      target: 'http://localhost:3100',
      changeOrigin: true
    })
  )
}