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

Posted 2023-03-04

【中文标题】如何添加跨域资源共享请求标头？ [复制]

【英文标题】：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 添加注释