CORS 策略已阻止从源“http://localhost:4200”访问“http://localhost:8080/BeginSignup”获取

Posted 2023-03-04

【中文标题】CORS 策略已阻止从源“http://localhost:4200”访问“http://localhost:8080/BeginSignup”获取

【英文标题】：Access to fetch at 'http://localhost:8080/BeginSignup' from origin 'http://localhost:4200' has been blocked by CORS policy

【发布时间】：2021-01-20 17:55:04

【问题描述】：

我正在尝试向我的 Golang AppEngine API 发送 fetch POST 请求。但是，我收到了 CORS 策略错误，我不知道为什么。这是我的代码：

这是从 Angular 调用 API 的代码

private async sendHTTPPut(data: UserInfo, func: string) 
    let requestHeaders =  'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*'  as HeadersInit;

    console.log(requestHeaders)

    return await fetch(
        this.endpoint + func,
        
          method: 'POST',
          headers: requestHeaders,
          body: JSON.stringify(data),
          mode: "cors"
        
    )
  

这是处理 CORS 的服务器代码：

func StartApp() 
    router = mux.NewRouter()

    router.HandleFunc("/", hello)
    router.HandleFunc("/hello", hello)
    router.HandleFunc("/AcceptMember", AcceptMember)
    router.HandleFunc("/CreateTeam", CreateTeam)
    router.HandleFunc("/Leave", Leave)
    router.HandleFunc("/InviteMember", InviteMember)
    router.HandleFunc("/BeginSignup", BeginSignup)
    router.HandleFunc("/ProcessSignup", ProcessSignup)
    router.HandleFunc("/CompleteSignup", CompleteSignup)
    // Scoring
    router.HandleFunc("/GetLocalScore", GetLocalScore)

    allowedOrigins := handlers.AllowedOrigins([]string  "* always" )
    allowedHeaders := handlers.AllowedHeaders([]string  "Content-Type" )

    if err := http.ListenAndServe(":8080", handlers.CORS(allowedOrigins, allowedHeaders)(router)); err != nil 
        log.Fatal(err)
    

这是发送到服务器的请求：

Request URL: http://localhost:8080/BeginSignup
Referrer Policy: no-referrer-when-downgrade

Provisional headers are shown
Access-Control-Allow-Origin: *
Content-Type: application/json
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/85.0.4183.121 Safari/537.36 Edg/85.0.564.68

PAYLOAD
member: phoneNum: "0648503047",…
member: phoneNum: "0648503047"
score: null
team: teamName: ".None", teamMembers: ["0648503047"], teamLeader: "0648503047"

这是从服务器发回的响应：

Request URL: http://localhost:8080/BeginSignup
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: [::1]:8080
Referrer Policy: no-referrer-when-downgrade
Content-Length: 0
Date: Mon, 05 Oct 2020 20:34:51 GMT
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Access-Control-Request-Headers: access-control-allow-origin,content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:4200
Referer: http://localhost:4200/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36 Edg/85.0.564.68

【问题讨论】：

Access-Control-Allow-Origin 是响应头，不是请求头。

按照@HereticMonkey 所说的，这意味着它需要在服务器上定义，而不是在您的前端。

我在您的服务器响应中缺少 allow-origin CORS 标头。考虑到这是一个 OPTIONS 预检响应，Access-Control-Request-Method: POST 似乎也很奇怪..

我现在将其更改为选项。不确定为什么缺少允许来源？仍有 CORS 问题

【参考方案1】：

我假设您在开发模式下运行 Angular (ng serve)。 在这种情况下，CORS 错误来自角度。

您必须在 src 中添加一个包含不同端点条目的 proxy.conf.json：

    "/api/*": 
        "target": "http://localhost:<your-port>",
        "secure": false,
        "logLevel": "debug"
    

并在你的 angular.json 中引用这个文件：

"serve": 
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": 
            "browserTarget": "<your-app>:build",
            "proxyConfig": "src/proxy.conf.json"
          ,
          ...
        ,

【讨论】：

我的应用引擎端点是“localhost:8080/...”。即没有“api/”我已经尝试过 /api/* 和只是 /*。两者都不起作用。我正在使用运行 ng serve 的 npm start，是的。

/api/* 只是我的示例的一部分，如果它不适用于 / 或 /* 可能仍然存在服务器端问题。

嗯，目标是我的本地 golang 服务器，对吗？本地主机：8080 ？另外，我的服务器端有什么不正确的？服务器还必须发送 Access-Control-Allow-Origin 吗？如果这是在 https 上的产品，我还会收到 CORS 错误吗？

只有在开发模式下才需要角度代理配置，因为它在这种模式下运行自己的小型 Web 服务器。此外，您的 Web 服务器需要提供 CORS 标头，因为您的客户端应用程序 (angular) 的 url 与我们的服务器应用程序 (go) 不同。在生产模式下，这取决于您的设置：如果您从 Web 服务器提供客户端，则两者共享相同的 url，并且您不会遇到 CORS 问题。如果它们是从不同的 url 提供的，则会再次出现 CORS 问题。

所以只要我有 4 个 CORS 标头从我的 golang 服务器发回，它应该可以工作吗？只需要标题来使 CORS 工作吗？你知道我实现的多路复用路由器解决方案吗？我从另一个 *** 问题中解决了这个问题