react解决跨域问题——设置代理、发送ajax

作者：System 时间：2024年08月15日分类：所有,ajax 字数：1116

这篇文章距离上次修改已过262天，其中的内容可能已经有所变动。

在React项目中解决跨域问题，通常可以通过设置代理服务器来解决。以下是如何在Create React App项目中设置代理，并发送跨域AJAX请求的示例。

设置代理：
在package.json同级的目录下，创建或编辑src/setupProxy.js文件，并配置代理规则。

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://target-domain.com', // 目标服务器地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '',
      },
    })
  );
};

发送AJAX请求：
在React组件中，你可以使用fetch或其他HTTP客户端发送请求到代理服务器。

import React, { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    fetch('/api/data') // 注意这里的URL不再包含目标域名
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.log('Error fetching data: ', error));
  }, []);

  return (
    <div>
      {/* 组件内容 */}
    </div>
  );
}

export default MyComponent;

在这个例子中，所有发往/api/data的请求都会通过代理服务器转发到http://target-domain.com/data，并且由于设置了changeOrigin为true，响应头中的Access-Control-Allow-Origin将会被修改为请求来源的域，从而实现跨域资源共享。

react解决跨域问题——设置代理、发送ajax

评论已关闭

推荐阅读