如何修复“访问已被CORS策略阻止: react中没有'Access-Control-Allow-Origin‘
问题描述：如何修复“访问已被CORS策略阻止: React中没有'Access-Control-Allow-Origin'”？
回答：
CORS（跨域资源共享）策略是浏览器的安全机制，用于限制从不同域名下加载的资源访问。当在React应用中发起跨域请求时，可能会遇到"访问已被CORS策略阻止: React中没有'Access-Control-Allow-Origin'"的错误。
要修复这个错误，有以下几种方法可以尝试：
- 使用代理服务器：在开发环境下，可以使用代理服务器来解决跨域问题。通过配置代理服务器将请求转发到目标服务器，并在代理服务器上设置相应的CORS头，允许跨域访问。
- 设置后端服务器的响应头：在后端服务器上，可以设置响应头中的"Access-Control-Allow-Origin"字段，允许特定的域名访问资源。将该字段的值设置为请求源的域名或"*"（表示允许任何域名访问），以解决CORS问题。
- 使用CORS中间件：对于某些框架和服务器，可以使用CORS中间件来处理跨域请求。例如，在Node.js中，可以使用"cors"中间件来设置CORS头，解决跨域问题。
- JSONP（仅限GET请求）：如果请求是一个GET请求，可以考虑使用JSONP（JSON with Padding）来实现跨域。JSONP利用了script标签可以跨域加载资源的特性，通过在前端动态创建script标签，并在URL中传递一个回调函数名来接收响应数据。
- 在React应用中使用HTTP代理：在React应用的package.json文件中，可以通过"proxy"字段配置一个HTTP代理。将此字段的值设置为目标服务器的URL，React开发服务器将在开发过程中将所有API请求代理到目标服务器，从而解决CORS问题。
需要注意的是，以上方法仅适用于开发环境中解决CORS问题。在生产环境中，应该在服务器端配置CORS策略，以确保安全性和正确性。
推荐的腾讯云相关产品和产品介绍链接地址：
- 腾讯云CORS产品：https://cloud.tencent.com/product/cors
请注意，本回答并未提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的云计算品牌商，如需了解更多关于它们的信息，请查询相关资料。
相关·内容
为什么csrf cookie在将POST请求发送到localhost:8000时设置，而在发送POST请求127.0.0.1:8000时没有设置？Django然后抱怨没有设置CSRF cookie。(假设我使用localhost:3000打开前端，那么在使用127.0.0.1:3000打开前端脚本时也会出现同样的现象，但这次POST请求只通过127.0.0.1:8000)。基本上，我对如何配置东西感兴趣，以便以后能够为来自两个不同域的前端(在我的情况下是React)和后端(Django)服务。目前，我没有登录功能等，所以CSRF保护没有任何意义。然而，我感兴趣的是，为什么在当前的配置下，我无法
浏览 6提问于2022-05-20得票数 0
我试图在localhost:8000上向Django REST Framework发送一个POST请求。当Postman发送请求时，我收到Django响应，但是我使用React.js应用程序使用fetch()函数接收控制台错误。我看到，对于React.js应用程序的请求，会向Django后端发送一个选项请求。
这是我在React应用程序上收到的错误。
Access to fetch at 'http://localhost:8000/api/admin/login/' from origin 'http://ucla.localhost:3000' has be
浏览 3提问于2020-01-15得票数 0
4回答
我们的应用程序支持CORS配置标头。我在两台不同的主机上分别配置了testApp。这两个设置相互独立地工作。host1上的应用程序配置了CORS标头Access-Control-Allow-Origin指向host2上的应用程序。当我访问host2的应用程序页面时，我希望它在响应中显示Access-Control-Allow-Origin头。但是哪一个是缺失的。
如何测试CORS头部以确认其正常工作或正确编码以支持跨域资源共享。
浏览 0提问于2018-07-19得票数 11
1回答
节点/角CORS问题
、、、
所以我有个奇怪的问题。我有一个在服务器上托管Node/ server的应用程序，运行在同一个端口上。但是，只有在一个页面上，存在一个CORS错误。
到目前为止，我已经在routes之前在app.js中添加了允许的CORS。
代码：
const apiRoutes = require("./routes/api");
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Con
浏览 2提问于2020-02-16得票数 0
您能帮我吗，我有一个函数有问题：http://localhost:3000被CORS策略阻塞了：No Access-Control-Allow-Origin头出现在请求的资源上。如果不透明响应满足您的需要，请将请求的模式设置为no-cors以获取资源：
handleSubmit = e => {
e.preventDefault();
const data={
'username' : this.username,
'password' : this.passwor
浏览 8提问于2021-02-19得票数 0
回答已采纳
我正试图在我的纯React中使用fetch来获取股票的价格。当我使用fetch(url)尝试在没有选项或配置的情况下获取信息时，会出现以下错误：
Access to fetch at 'https://query1.finance.yahoo.com/v8/finance/chart/RCF.BO' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control ch
浏览 19提问于2022-12-01得票数 0
3回答
我正在学习react，我目前在本地主机上的visual上运行了一个.net核心API :7071。
Local没有运行Cors，因为它不需要使用cors。
使用以下命令创建简单的react客户端将不会因为cors错误返回数据？
我已经在网上尝试过许多解决方案，但它们都没有工作，所以我如何使这个“简单”的客户端工作而不产生以下错误
Access to XMLHttpRequest at 'http://localhost:7071/api/Users' from origin 'http://localhost:3000' has been blocked by
浏览 13提问于2022-08-23得票数 0
回答已采纳
我正在尝试用下面的代码从开发模式下的react应用程序中获取一个无服务器函数。
let response = await fetch(url,
{
method: 'POST',
mode: 'cors',
body: "param=" + paramVar,
})
.then(response => response.json());
后端函数是一个Python Cloud函数，代码如下：
def main(request):
浏览 0提问于2020-08-16得票数 4
回答已采纳
我们有以下设置
角11 / TypeScript应用程序：托管于IIS /TLS证书(HTTPS)，并使用withCredentials报头向后端API发送用户凭据(NTLM)。此外，对于CORS，我们将传递标题“访问-控制-允许-原产地”：“*”
Asp.Net Web (.Net 6)：使用Http.Sys (用于支持NTLM)和使用HTTP进行自我托管。为了支持CORS，我们使用以下方法
builder.Services.AddCors(options => options.AddDefaultPolicy(b => b.SetIsOriginAllowed(_ =>
浏览 3提问于2022-05-17得票数 -1
我有.NET核心5.0webapi，我需要从一个角度应用程序中使用，它们都运行在同一台机器上。
我得到的错误是：
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/api/Game/GetPossibleMoves. (Reason: CORS request did not succeed).
我做了什么/试过什么
AngularDisabled windows防火墙上的读取并尝试应用其他答案，以便在后端.NET
浏览 1提问于2021-03-10得票数 0
回答已采纳
我试着在我的本地运行这个应用程序，但不是working.Many时间，我试过了，但是我找不到这个问题。我想api url issue.If我运行这个应用程序我正在得到下面的error.How来解决这个问题？如何才能运行此应用程序而不出错？ zone.js:2935 GET http://salembrothers.ca/app/api/getSettings/social 404 (Not Found)
products:1 Access to XMLHttpRequest at 'http://salembrothers.ca/app/api/getSettings/socia
浏览 20提问于2019-09-19得票数 1
reactjs码
import axios from 'axios';
import {useEffect,useState} from 'react';
import ReactDOM from "react-dom/client";
import React from "react";
const App = () => {
const [res,setRes] = useState(null);
useEffect(()=>{
document.cookie="hello
浏览 5提问于2022-06-19得票数 0
从Jquery调用API时获取CORS错误。
CORS已经在API端启用了，我可以使用react > Axios调用，但是对于这个应用程序，我们必须使用Jquery。
使用此代码：
$.ajax({
type: 'POST',
url: "https://awsapiurlhere",
crossDomain: true,
async:true,
data: {
aaa: "444",
bbb: "aaa",
ccc: "
浏览 2提问于2019-09-20得票数 1
回答已采纳
如何删除此错误
已被CORS策略阻止:请求的资源上不存在'Access-Control-Allow-Origin‘标头
jQuery调用google API距离矩阵时
使用此源
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
浏览 7提问于2019-10-01得票数 0
我用角度连接RestAPI。我有个错误
zone.js:2969在'localhost:8000/auth/api/authen‘from '’的访问已被CORS策略阻止:只支持协议方案: http、数据、铬、铬扩展、https的跨源请求。
但这是我的邮差结果，
这是我的Nodejs代码
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(b
浏览 0提问于2018-11-17得票数 1
当我运行以下代码来获取存储在公共GCS桶中的数据(.json格式)时，发生了一些错误。
async function getData() {
const carsDataReq = await fetch(...);
const carsData = await carsDataReq.json();
const cleaned = carsData.map(car => ({
mpg: car.Miles_per_Gallon,
horsepower: car.Horsepower,
}))
.filter(car => (car.mpg
浏览 2提问于2019-10-16得票数 2
回答已采纳
我厌倦了所有浏览器中的以下问题
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://vid-129002.hls.chinanetcenter.broadcastapp.agoraio.cn/live/pub421490684319281/playlist.m3u8. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing)
我在node js上使用了Reactjs和express。在
浏览 0提问于2017-03-28得票数 1
当使用react本机调试器时，所有请求似乎都能工作，但在http://localhost:8081/debugger-ui/尝试使用chrome调试器时，我得到：
Access to XMLHttpRequest at 'https:<my_api_url>' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does n
浏览 5提问于2022-05-05得票数 0
我有一个控制器，在这里我启用了cors。
[EnableCors(Startup.CORS_POLICY_EXTERNAL)]
public class MasterController : Controller
{
[HttpGet]
public IActionResult TestaConnessione()
{
return Ok();
}
}
但是通过简单的抓取：
fetch("url/MasterController/TestaConnessione")
呼叫者获得header CORS “Access-Control
浏览 2提问于2022-08-18得票数 3
回答已采纳
1回答
我创建了一个Formik登录表单，并调用react js fetch方法。在web api端添加cors，在Postman和jquery中运行成功。如何通过react js调用"token_type"："bearer“？web api中也启用了cors，也成功生成了Token。如何通过react js调用这个url https://localhost:44323/token？
我的代码是
onSubmit={(values) => {
fetch('https://localhost:44323/token', {
浏览 0提问于2020-06-07得票数 0
我设置了两个不同的GCP App Engine应用程序。一个是带有以下app.yaml的express服务器(让我们称其为foo)：
runtime: nodejs10
handlers:
- url: /tasks
static_dir: /tasks
http_headers:
Access-Control-Allow-Origin: https://bar.appspot.com/
secure: always
在我的酒吧应用程序中，我正在尝试进行一个fetch调用：
const response = await fetch('https://foo.apps
浏览 1提问于2018-11-29得票数 0
我构建了一个应用程序--使用vue和codeigniter，但是当我尝试获取api时，我在控制台上遇到了这个错误。
Access to XMLHttpRequest at 'http://localhost:8888/project/login'
from origin 'http://localhost:8080' has been blocked by CORS policy:
Request header field access-control-allow-origin is not allowed
by Access-Control-Allow-
浏览 3提问于2019-04-27得票数 54
回答已采纳
我们正在尝试使用Passport.js在我们的应用程序中实现Github oAuth。如果用户通过单击锚定标记/href来访问端点，则可以正常工作，但如果我们使用单击处理程序来发起ajax请求，则会收到来自Github服务器的CORS错误。为什么？
服务器端代码：
app.get('/auth/github',
passport.authenticate('github', { scope: [ 'user:email' ] }));
app.get('/auth/github/callback',
passport.a
浏览 0提问于2016-06-06得票数 0
我不知道如何在我的代码中解决这个问题。我的代码如下：
$http({
method: 'POST',
url: "http://urlexample.com.br",
headers : {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8;",
浏览 0提问于2019-04-01得票数 0
回答已采纳
我有一个组件，它调用了我与Heroku一起部署的API：
import React from 'react';
class ApiCaller extends React.Component {
constructor(props) {
super(props);
this.state = {
load: '',
};
}
componentDidMount(){
fetch('https://skincierge-data-api-1.herokuapp.com/api/v1/query/?SK
浏览 3提问于2020-02-11得票数 0
回答已采纳
我的后端(localhost:8000)和前端(locahost:5000)容器都向上旋转，可以通过浏览器访问，但我无法从前端容器访问后端容器。
从内部前部：
/usr/src/nuxt-app # curl http://localhost:8000 -v
* Trying 127.0.0.1:8000...
* TCP_NODELAY set
* connect to 127.0.0.1 port 8000 failed: Connection refused
* Trying ::1:8000...
* TCP_NODELAY set
* Immediate connect fa
浏览 2提问于2021-04-26得票数 0
我正在努力从我的本地主机creat-react-app项目向发出一个成功的请求。我已经把我的fetch api请求放到了我的main contianer的componentDidMount中。
fetchData = () => {
return fetch('http://swapi.co/api/people', {method: 'GET'}).then((response) => {
console.log(response);
});
}
componentDid
浏览 21提问于2018-08-31得票数 0
回答已采纳
我是新手在react gatsby，当我做应用程序接口调用它给我错误origin has been blocked by CORS policy，在这里我已经放置了我的全部代码，任何人可以查看它，并帮助我解决这个问题。
API调用
get_review_list() {
fetch('http://******/get-dashboard-reviews/1', {
method: 'POST',
mode: "cors",
headers: {
'Accept': &#
浏览 3提问于2019-11-26得票数 0
使用fabric.js，我尝试从/S3url加载背景图像。
fabric.Image.fromURL(imgURL, function(img) {
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas),
{
scaleX: canvas.width / img.width,
scaleY: canvas.height / img.height
});
}, {crossOrigin: 'anonymous'});
当crossOrigin出现时，我得到标
浏览 1提问于2019-03-06得票数 3
回答已采纳
我有一个带有GET和PUT操作的JAX-RS控制器。我还有一个使用react的前端，我在其中执行以下操作
let headers = new Headers();
headers.append('Content-Type', 'multipart/form-data');
headers.append('Accept', 'application/json');
headers.append('Access-Control-Allow-Origin', 'http://localhost:3
浏览 0提问于2019-09-13得票数 0
我想在reactjs组件中使用/data/todo.js文件。我使用了axios http请求来获取我的react组件中的数据，即，
import React, { Component } from 'react';
import axios from 'axios';
class TodoList extends Component {
componentWillMount() {
var config = {
headers: {
"Access-Control-Al
浏览 0提问于2018-04-12得票数 0
回答已采纳
1回答
我正在运行的角度9项目连接到消防基地。
我和CORS有问题，我有两个方案：
1.从我的防火墙数据库请求图像Url
ERROR: Access to XMLHttpRequest at 'https://firebasestorage.googleapis.com .... from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resour
浏览 2提问于2020-04-10得票数 0
1回答
我有用nodejs编写的API。我不想任何人写任何东西(/post)到我的应用程序和我的数据库，如果他不在我的网站上。
我使用了cors库
我试过：app.use(cors())和我的/post -
app.get('/users', cors(), function() {})
然而，它仍然不起作用。我的意思是，我可以打开邮递员应用程序并发送/get和/post请求，没有任何错误！
我甚至可以看到我的标题改变了：Access-Control-Allow-Origin → https://example.com (我的域)，但是我仍然可以在postman中获得数据。
我错过了什
浏览 0提问于2018-08-30得票数 0
回答已采纳
我在前端使用React，并且从我不拥有的另一个域调用API。我的axios请求：
axios(requestURL, {
method: 'GET',
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/json',
'Authorization': key,
withCre
浏览 2提问于2019-03-17得票数 12
回答已采纳
因此，我在前端应用程序中使用第三方API。我有一些CORS的问题。因为它是一个公共API，所以我联系了API维护者，要求他们解除CORS控制。他们已经做到了，似乎是通过向Access-Control-Allow-Origin添加一个*。
那会很完美但是..。因为这个(旧的) API需要身份验证，所以它正在使用cookie，现在我得到了这个错误(参见标题)。
我的应用程序在React中，我使用的是带有Axios的
myApiRequest.defaults.withCredentials = true;
线路。
有没有办法在前端应用程序中做到这一点，或者后端是唯一的办法？
谢谢！
浏览 11提问于2021-10-14得票数 5
我目前正在使用React和Flask API构建一个应用程序，我得到了一些我不理解的CORS错误：
我有一个这样的端点：
@app.route('/home/', methods=['GET'])
def home():
response = Response(
json.dumps(
get_data()
),
mimetype='application/json'
)
response.headers.add("Access-Control
浏览 15提问于2021-06-03得票数 0
我正在学习ionic，我已经用ionic 5创建了一个简单的注册应用。
当我试图调用api来发布数据时，我得到了这个错误。
Access to XMLHttpRequest at 'http://localhost:8888/php_project/mango/signup.php' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No
浏览 52提问于2020-05-25得票数 0
回答已采纳
componentDidMount(){
let default_image = localStorage.getItem("default_image");
const url = 'https://storage.googleapis.com/smart-staging-bucket/tryon/images/default/2021-03-14/face.jpg'
const fileName = 'myFile.jpg'
fetch(url)
.the
浏览 3提问于2021-03-14得票数 1
回答已采纳
我试着从入门指南中学习反应并获得这个简单的模板：
<!DOCTYPE html>
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
浏览 0提问于2020-09-24得票数 1
当我要使用函数将数据添加到数据库时，在服务器上我已经添加了Access-Control-Allow-Origin，这样它就不会被CORS阻止，但当我查看浏览器控制台工具选项卡控制台时仍然会出错
Access to XMLHttpRequest at 'https://int.goo.id/api/pg/sso.register' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass ac
浏览 1提问于2019-09-03得票数 13
1回答
我有一个Lambda功能集成与API网关启用CORS。我使用的是LAMBDA_PROXY集成，所以我知道必须在Lambda函数的响应中指定Access-Control-Allow-Origin头。但是，我只希望允许来自特定域(www.example.com)的跨资源共享。
Lambda函数-
'use strict'
module.exports.handler = (event, context, callback) => {
const response = {
statusCode: 200,
headers: {
"Ac
浏览 1提问于2018-03-17得票数 2
回答已采纳
1回答
我在笔记本电脑上安装了Nginx。我的web服务器包含按需的破折号流，使用dash.js播放器，它只在本地主机上托管。我只想限制可以在该播放器中使用的本地主机上的破折号数据集。我能用CORS实现我的目的吗？我试着添加
location /{
add_header 'Access-Control-Allow-Origin' 'http://localhost';
}
但是，任何破折号数据集仍然可以使用驻留在本地主机上的播放器。如何在Nginx上启用简单的CORS功能？我对CORS的理解是错的吗？
谢谢
浏览 2提问于2016-05-19得票数 1
我试图使一个axios获得请求，但我得到的策略错误。我对axios有点陌生，这是我尝试过的：
useEffect(() => {
let url =
'http://18.189.49.66:3000/api/calculate/' +
props.type +
'/' +
height +
'/' +
width;
var config = {
headers: { 'Access-Control-Allow-Origin'
浏览 5提问于2020-02-17得票数 1
回答已采纳
3回答
我正在构建一个web应用程序，前端是用颤振完成的，而后端是用Python完成的。GET请求可以正常工作，而POST请求由于CORS而被阻塞，我得到以下错误消息：
Access to XMLHttpRequest at 'http://127.0.0.1:8080/signal' from origin 'http://localhost:57765' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requeste
浏览 10提问于2022-04-10得票数 7
回答已采纳
我的.env (根dir)：
REACT_APP_ID = '123456';
REACT_APP_KEY = 'abcde123';
在app.js中：
useEffect(() => {
getRecipes();
}, [query]);
const getRecipes = async () => {
const response = await fetch(`https://api.edamam.com/search?q=${query}&app_id=${process.env.REACT_APP_ID}&
浏览 7提问于2022-10-29得票数 0
我不能理解问题是什么，我通过fetch得到一个请求，我试着看看会发生什么，但是什么都不起作用
import React from 'react';
import './SearchLine.css';
export class SearchLine extends React.Component {
constructor(props) {
super(props)
this.state = { data: []}
}
MakeARequest(request) {
fetch("h
浏览 2提问于2019-04-21得票数 0
2回答
我已经构建了一个React应用程序(我的第一个React应用程序)和一个C#.NET Core3.1WebAPI，它为UI提供数据服务。我正在同一个服务器(Windows 10)上部署API和React应用程序，端口3030用于API，端口3029用于React构建，这是运行命令"npm“生成的。UI的IIS站点指向生成目录。
在我的开发环境中，使用部署的API运行应用程序是可行的，不需要代理。在部署时，我的屏幕将加载，但没有通过获取检索记录，而是有一个CORS错误：
Access to fetch at 'http://localhost:3030/api/checking&
浏览 4提问于2020-10-28得票数 0
回答已采纳
我在将Content-Type设置为image/png时，通过PUT请求从本地主机将文件上传到时遇到CORS错误
Access to XMLHttpRequest at 'https://storage.googleapis.com/{{BUCKET_NAME}}/folder/image.png?Expires=1542676226&GoogleAccessId=XXXX&Signature=YYYY' from origin 'http://localhost:3000' has been blocked by CORS policy: No
浏览 1提问于2018-11-20得票数 1
据我理解，使用CORS模块将从资源中删除Access-Control-Allow-Origin头，从而导致浏览器中的XmlHttp请求失败。
但是，这会阻止来自CURL或其他本地应用程序/web服务器(即.通过PHP编写并运行的从该资源成功检索数据的请求？
浏览 4提问于2017-04-16得票数 25
回答已采纳
我正在尝试将JavaScript作为一个片段运行，从一个域开始，并对google搜索执行提取请求，我一直收到以下错误：
'Access to fetch at 'https://www.google.com/' from origin 'https://www.somewebsite.org' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque
浏览 4提问于2022-03-21得票数 -1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
