从 React(同构应用程序)进行 API 调用时出现“Access-Control-Allow-Origin"问题

#39;Access-Control-Allow-Origin#39; issue when API call made from React (Isomorphic app)(从 React(同构应用程序)进行 API 调用时出现“Access-Control-Allow-Origin问题)
本文介绍了从 React(同构应用程序)进行 API 调用时出现“Access-Control-Allow-Origin"问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在使用 React 和 Express 的同构 JavaScript 应用程序时遇到了问题.

I'm running into an issue with my isomorphic JavaScript app using React and Express.

我正在尝试在我的组件挂载时使用 axios.get 发出 HTTP 请求

I am trying to make an HTTP request with axios.get when my component mounts

componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

我从 API 获得状态 200 res,但我没有获得任何响应数据并且在我的控制台中收到错误

I am getting a status 200 res from the API, but I am not getting any response data and getting an error in my console

XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

但是,如果我在 server.js 中提出请求

However, if I make the request in my server.js

const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

它工作正常,我在服务器启动时得到响应数据.这是实际 API 的问题还是我做错了什么?如果这是一个 CORS 问题,我猜 server.js 中的请求也不起作用?谢谢!

It works fine and I get response data when the server starts. Is this an issue with the actual API or am I doing something wrong? If this was a CORS issue I'm guessing the request in server.js wouldn't work either? Thanks!

推荐答案

CORS 是一个浏览器功能.服务器需要选择加入 CORS 以允许浏览器绕过同源策略.您的服务器将没有相同的限制,并且能够使用公共 API 向任何服务器发出请求.https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

CORS is a browser feature. Servers need to opt into CORS to allow browsers to bypass same-origin policy. Your server would not have that same restriction and be able to make requests to any server with a public API. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

在您的服务器上创建一个启用了 CORS 的端点,该端点可以充当您的 Web 应用程序的代理.

Create an endpoint on your server with CORS enabled that can act as a proxy for your web app.

这篇关于从 React(同构应用程序)进行 API 调用时出现“Access-Control-Allow-Origin"问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)