reactjs 跨来源请求被阻止:同源策略不允许读取远程资源react js

watbbzwu  于 2023-01-04  发布在  React
关注(0)|答案(3)|浏览(284)

我在Mac OS设备上运行项目,并希望从另一台笔记本电脑访问。
第一设备也从服务器获得所有响应:
http://192.168.1.101:3000/
但另一台笔记本电脑我得到这个错误消息:
第一个月
const requestOptions = { method: 'POST', headers: { 'Content-Type': 'multipart/form-data', 'Access-Control-Allow-Origin': '*'}, body: JSON.stringify(formData) };

bmp9r5qi

bmp9r5qi1#

headers: {'Access-Control-Allow-Origin': '*'}

到API从中提取的服务器

s4chpxco

s4chpxco2#

我认为这与后端有关,有时后端只允许某些源,您的新前端域必须添加到Access-Control-Allow-Origin
但有时这可能与Web服务器有关,它的配置需要更改,例如,如果您正在使用Apache,则必须更改htaccess文件

7z5jn7bk

7z5jn7bk3#

假设你在后端使用cors()(比如节点服务器),那么在react应用中,你可以为API端点设置代理。
src目录中创建一个名为setupProxy.js的文件。它所做的是为你的API端点创建代理。你可以做的事情如下

  • 设置代理.js*
const { createProxyMiddleware } = require('http-proxy-middleware');

const BACKEND_HOST = process.env.REACT_APP_BACKEND_HOST || 'localhost';
const BACKEND_PORT = process.env.BACKEND_PORT || 8000;

module.exports = function(app) {

  app.use(
    '/',
    createProxyMiddleware({
      target: target,
      changeOrigin: true,
      logLevel: 'debug'
    })
  );

  /**
  *   You can create other proxies using app.use() method.
  */
};

**注意:**您不需要将此文件导入到任何位置。它会在您启动开发服务器时自动注册。

创建代理后,你应该发送请求到你的后端服务器,只指定端点。就像如果你想发送请求,你应该使用/而不是http://localhost:8000
如果有用就给我。谢谢

相关问题