拒绝跨域烦恼，React教你设置代理、发送Ajax请求

2023-04-23 10:30:05

React 跨域问题：轻松解决跨域限制

在 React 开发中，跨域问题是一个常见的挑战，它会限制不同来源之间的资源访问，导致应用程序出现错误和功能受限。本文将探讨解决 React 跨域问题的两种有效方法：设置代理和发送 Ajax 请求。

设置代理：绕过跨域限制

设置代理是解决跨域问题的一种简单方法。代理作为中介，将跨域请求转发到另一个服务器，该服务器再将请求转发到目标服务器，从而绕过浏览器的跨域限制。

使用 webpack-dev-server 设置代理

webpack-dev-server 是用于开发 React 项目的工具，它可以通过 proxy 选项设置代理。例如：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      secure: false
    }
  }
}

以上配置将所有以 /api 开头的请求代理到 http://localhost:8080。

发送 Ajax 请求：跨域数据获取

Ajax 请求是一种异步请求，它允许应用程序在不刷新页面的情况下与服务器通信。通过使用 XMLHttpRequest 对象，可以发送 Ajax 请求。例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/api/users');
xhr.onload = function() {
  if (xhr.status === 200) {
    var users = JSON.parse(xhr.responseText);
    console.log(users);
  }
};
xhr.send();

以上代码发送一个 GET 请求到 http://localhost:8080/api/users，并通过 onload 事件处理函数处理响应。

配置多个代理：支持不同来源

有时，一个项目可能需要访问来自多个不同域名的资源。这时，可以配置多个代理来处理不同的跨域请求。例如：

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      secure: false
    },
    '/images': {
      target: 'http://localhost:9000',
      secure: false
    }
  }
}