CORS 策略已阻止从源 '' 访问 '' 处的 XMLHttpRequest：不存在“Access-Control-Allow-Origin”标头答案

【问题标题】：Access to XMLHttpRequest at '' from origin '' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is presentCORS 策略已阻止从源 '' 访问 '' 处的 XMLHttpRequest：不存在“Access-Control-Allow-Origin”标头
【发布时间】：2021-06-30 17:01:29
【问题描述】：

我浏览了这篇文章link。它与节点 js 相关。我目前正在使用 Spring boot 来创建 restful web 服务，react js 来构建前端。

在解决方案中提到，将以下 HTTP 标头添加到响应中：访问控制允许标题：内容类型

我还提供了我的前端代码，谁能建议我如何将此标头添加到我的响应中？如何解决这个问题？

 TodoDataService.retrieveAllTodo(username)
            .then(
                response=>{
                    console.log(response)
                    this.setState({todos:response.data})
                }
            )

class TodoDataService{

    retrieveAllTodo(name) {
        return axios.get(`${API_URL}/users/${name}/todos`);
    }
}

【问题讨论】：

标签： javascript reactjs spring-boot

【解决方案1】：

CORS 策略是您的浏览器提供的安全配置，这意味着它可以在任何其他浏览器上进行不同的处理。基本上，这意味着您的浏览器期待来自您的网站的关于如何处理对位于托管您网站的服务器/域之外的资源的请求的指令。

使用 HttpServletResponse 在后端设置此标头：

@GetMapping("/http-servlet-response")
public String usingHttpServletResponse(HttpServletResponse response) {
    response.addHeader("Access-Control-Allow-Origin", "https://yourDomainHere.com");
    return "This is the response with the new header";
}

另一个使用 ResponseEntity 的选项：

@GetMapping("/response-entity-builder-with-http-headers")
public ResponseEntity<String> usingResponseEntityBuilderAndHttpHeaders() {
    HttpHeaders responseHeaders = new HttpHeaders();
    responseHeaders.set("Access-Control-Allow-Origin", "https://yourDomainHere.com");

    return ResponseEntity.ok()
      .headers(responseHeaders)
      .body("Response with header using ResponseEntity");
}

您需要将“yourDomainHere.com”更改为您的 XMLHttpRequest 无法从中加载的实际域。

这是另一种方法。实现 CORS 策略的现代浏览器将尝试通过向您尝试访问的 AJAX 请求的域放置额外的 HTTP 请求来调查是否允许 AJAX 调用。此预检请求将使用 OPTIONS 动词发送，如下所示：

OPTIONS /
Host: yourDomainHere.com   'you are going to'
Origin: http://www.yourWebsiteOriginalDomain.com  'you are going from'
Access-Control-Request-Method: PUT   'Any verb your XMLHttpRequest intends to use'

这允许您在后端配置映射以处理 OPTIONS 调用并使用以下自定义 HTTP 标头以类似的内容进行响应：

Access-Control-Allow-Origin: http://www.yourWebsiteOriginalDomain.com  'you are going from'
Access-Control-Allow-Methods: PUT, DELETE   'verbs that you allow'

【讨论】：

我应该在哪里包含 usingHttpServletResponse 方法？在 main 方法中还是在其他地方？
您可以使用建议的方法并对其进行调整以处理您需要的内容并返回所需的响应。或者使用您的自定义方法（处理 HTTP 请求的方法）并传递“HttpServletResponse 响应”参数，以便您可以将新标头添加到响应中。
我修改了我的一种方法，但仍然遇到同样的错误。 code 我的前端在 localhost:3000 上运行，后端在 localhost:8080 上运行。

【解决方案2】：

这可能是源于您的浏览器的错误。如果您使用的是 Chrome，是否必须尝试使用扩展程序来解锁 CORS，例如“Cors unblock”或类似的东西？

【讨论】：