正文 

当前位置： 首页 > 知识 >

如何添加跨域资源共享请求标头？ [复制]

     2023-03-04     144

关键词：

【中文标题】如何添加跨域资源共享请求标头？ [复制]【英文标题】：How to add Cross Origin Resource Sharing request headers? [duplicate] 【发布时间】：2019-02-25 13:28:08 【问题描述】：

我正在使用 React JS 构建一个 REST 消费者，我已经构建了一个 REST api 作为后端服务，前端将是一个完全不同的应用程序。将前端与后端分开。

我目前正在努力从前端向后端发出跨源请求。后端托管在 http://localhost:8080，前端 react 应用托管在 http://localhost:3000。发出请求时，我在控制台上收到以下错误：

无法加载http://localhost:8080/api/something：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:3000' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

现在我已经使用 chrome 扩展修复了这个错误，以允许 CORS：https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

但这只是一个临时解决方案，我尝试添加 Access-Control-Allow-Origin 标头，但这似乎不起作用。

这是我用来发出请求的代码：

let Myheaders = new Headers()
Myheaders.append("Access-Control-Allow-Origin", "http://localhost:8080/")

let res = await fetch("http://localhost:8080/api/something", 

    method: "get", 
    mode: "cors",
    headers: Myheaders
)
let res1 = await res.json()

我尝试为 Access-Control-Allow-Origin 标头添加多个值（带有 反斜杠 或不带 反斜杠），但似乎没有工作。

有人遇到同样的问题并有解决办法吗？

【问题讨论】：

您的 JavaScript 无法授予自己访问 REST API 的权限。该权限必须由 REST API 授予。您尝试添加的标头属于响应，而不是请求。 谢谢，原来是后端问题。后端是在 Springboot 中使用 Kotlin 构建的，在本教程中，它在第一次尝试时工作：spring.io/guides/gs/rest-service-cors 【参考方案1】：

这是后端问题而不是前端问题 您应该允许来自后端的 cors，这取决于后端使用的技术

【讨论】：

好吧，我可以从 Postman 向后端发出请求，所以一切设置正确。 @HarryStylesheet — 对重复问题的接受答案解释了为什么它适用于 Postman，但不适用于基于浏览器的 JS。 我在请求从浏览器发出之前遇到同样的问题，它在其标头中包含域但在邮递员中没有在标头中发送任何域我在后端使用弹簧启动，我通过添加@Bean CorsConfigurationSource corsConfigurationSource() CorsConfiguration 配置 = new CorsConfiguration(); configuration.setAllowedOrigins(Arrays.asList("example.com")); configuration.setAllowedMethods(Arrays.asList("GET","POST")); ..... return source; 到我的安全配置 现在已经修复了，我也在后台使用了Springboot和Kotlin。本教程帮助了我：spring.io/guides/gs/rest-service-cors。就在 REST 控制器上方的 @CrossOrigin(origins = "localhost:9000") 注释处 它很好，但如果你在所有 API 上允许 CORS，你可以通过添加代码来避免向所有 API 添加注释

Internet Explorer 11 不在 CORS 请求中添加 Origin 标头？

...设。假设nr1：源头浏览器需要将Origin标头放在CORS（跨源资源共享）请求中。Wikipedia:为了发起一个跨域请求，浏览器发送请求 查看详情

如何解决 axios 中请求的资源上没有“Access-Control-Allow-Origin”标头？ [复制]

】如何解决axios中请求的资源上没有“Access-Control-Allow-Origin”标头？[复制]【英文标题】：HowcanIsolveNo\'Access-Control-Allow-Origin\'headerispresentontherequestedresourceinaxios?[duplicate]【发布时间】：2019-02-1109:59:10【问题描述】：我的vue脚本是这... 查看详情

跨域请求被阻止：同源策略不允许读取远程资源，CORS 标头中缺少令牌“缓存控制”

】跨域请求被阻止：同源策略不允许读取远程资源，CORS标头中缺少令牌“缓存控制”【英文标题】：Cross-OriginRequestBlocked:TheSameOriginPolicydisallowsreadingtheremoteresource,missingtoken‘cache-control’inCORSheader【发布时间】：2017-06-1908:37:55【... 查看详情

React JS - 请求的资源上不存在“Access-Control-Allow-Origin”标头。跨域资源错误

...actJS-请求的资源上不存在“Access-Control-Allow-Origin”标头。跨域资源错误【英文标题】：ReactJS-No\'Access-Control-Allow-Origin\'headerispresentontherequestedresource.CrossOriginResourceError【发布时间】：2019-08-0111:48:22【问题描述】：我在ReactWeb应用程... 查看详情

允许跨域 ajax 请求中的标头

...一个Ajax请求收到响应，但第二个没有包含标头的响应。如何允许标头包含在跨域Ajax请求中。注意-我希望我需要进行服务器端更改，https://***.com/a/32140436/1032531也这么说，但没有说明如何进行这些更改。另外，我不是在寻找仅j 查看详情

如何在 couchDB 中添加 cors - 请求的资源上不存在“Access-Control-Allow-Origin”标头

】如何在couchDB中添加cors-请求的资源上不存在“Access-Control-Allow-Origin”标头【英文标题】：howtoaddcorsincouchDB--No\'Access-Control-Allow-Origin\'headerispresentontherequestedresource【发布时间】：2014-01-2017:34:36【问题描述】：我正在尝试创建一个... 查看详情

Spring Security (OAuth)：如何在未公开 restTemplate 时添加请求标头？

】SpringSecurity(OAuth)：如何在未公开restTemplate时添加请求标头？【英文标题】：SpringSecurity(OAuth):HowcanIaddarequestheaderwhenrestTemplateisnotexposed?【发布时间】：2021-09-0506:16:41【问题描述】：我正在尝试使用SpringSecurity中内置的OAuth支持来... 查看详情

如何在 Angular 6 的生产级应用程序中处理跨域资源共享？

】如何在Angular6的生产级应用程序中处理跨域资源共享？【英文标题】：HowtohandleCross-OriginResourceSharinginaproductionlevelappliactionofangular6?【发布时间】：2018-12-0701:39:10【问题描述】：我知道我可以通过修改服务器以添加标头Access-Contro... 查看详情

使用身份验证标头发出跨域请求

...ol-Allow-Origin:*Access-Control-Allow-Credentials:true我正在尝试了解如何使用身份验证令牌将请求传递给站点。我在本地ap 查看详情

Ajax跨域请求设置标头失败

...domani（我有用户名和密码，但我不知道我必须使用它以及如何使用它）并传递一个查询，然后打印结果。这是我的脚 查看详情

跨域资源共享错误 (CORS) Angular 10

】跨域资源共享错误(CORS)Angular10【英文标题】：Cross-OriginResourceSharingError(CORS)Angular10【发布时间】：2021-05-1607:54:35【问题描述】：我使用Angular10（前端）和Node.js（后端）制作了Web应用程序。但是当我通过添加标头发送请求时，它... 查看详情

跨域资源共享错误：预检响应不允许标头

】跨域资源共享错误：预检响应不允许标头【英文标题】：Cross-OriginResourcesharingerror:HeaderDisallowedbypreflightresponse【发布时间】：2021-07-1821:51:45【问题描述】：我正在学习如何使用react作为前端和django作为后端。每次我将post方法发... 查看详情

具有自定义标头和请求正文作为 JSON 字符串的跨域 jquery ajax 请求

...在我认为我解决了跨域问题之后，我陷入了困境：我需要添加我的自定义“myCustomHead 查看详情

如何在 Flask 中捕获和读取传入 HTTP 请求的标头？ [复制]

】如何在Flask中捕获和读取传入HTTP请求的标头？[复制]【英文标题】：HowtocaptureandreadheadersofincomingHTTPrequestsinFlask?[duplicate]【发布时间】：2016-02-2322:18:51【问题描述】：我想读取到我的服务器的传入请求的标头以跟踪其位置和其他... 查看详情

如何使用 Location 标头？

】如何使用Location标头？【英文标题】：HowcanIuseLocationheader?【发布时间】：2021-11-1223:25:42【问题描述】：我使用SpringBoot构建RESTAPI，并在react应用程序中使用此API。我想创建一个新资源（POST），并在创建后立即向该资源添加一个... 查看详情

带有 PHP 标头的跨域请求标头 (CORS)

】带有PHP标头的跨域请求标头(CORS)【英文标题】：Cross-OriginRequestHeaders(CORS)withPHPheaders【发布时间】：2018-09-1012:57:30【问题描述】：我有一个简单的PHP脚本，我正在尝试跨域CORS请求：<?phpheader("Access-Control-Allow-Origin:*");header("Acces... 查看详情

跨域 ajax 请求中的预检标头未解决授权标头

】跨域ajax请求中的预检标头未解决授权标头【英文标题】：Authorizationheadernotsolvedfrompreflightheaderincrossdomainajaxrequest【发布时间】：2019-11-0301:01:59【问题描述】：我想使用jqueryajax访问从https://A/到https://B/的跨域。我的请求头看起来... 查看详情

如何避免“访问控制允许标头不允许请求标头字段授权”从本地驱动器运行 JavaScript？ [复制]

】如何避免“访问控制允许标头不允许请求标头字段授权”从本地驱动器运行JavaScript？[复制]【英文标题】：Howtoavoid"RequestheaderfieldAuthorizationisnotallowedbyAccess-Control-Allow-Headers"runningJavaScriptfromlocaldrive?[duplicate]【发布时间】... 查看详情