Question

我已经使用angular 5构建了一个应用程序，它连接到使用golang开发的REST API，并托管在端口8080上运行的aws ec2实例上。我的角度前端代码创建了一个POST请求，在发出请求之前，首先是浏览器发送COR预检请求，该请求失败，并显示以下错误消息：

阻止跨源请求：同源策略禁止读取远程资源在 https://signup.mysite.com:8080/api/v1/merchant/signup。（原因：在CORS标头中丢失令牌“access-control-allow-credentials” 来自CORS预检频道的“Access-Control-Allow-Headers”。

浏览器在OPTIONS请求中将以下标头发送到REST API服务器：

Access-Control-Request-Headers : access-control-allow-credentia…rol-allow-origin,content-type
Access-Control-Request-Method : POST

在golang上启用Cors但不确定它们是否正常工作。我该如何解决问题

EDIT 使用以下代码在角色5中的帖子请求中添加标题

import { HttpClient, HttpParams, HttpHeaders } from '@angular/common/http';



let headers = new HttpHeaders();
  headers = headers.append('Access-Control-Allow-Origin', '*');
  headers = headers.append('Access-Control-Allow-Credentials', 'true');

  return this.http.post<Response>(this.apiUrl+'merchant/signup', JSON.stringify(formValues),{headers: headers}).map(response => response.response);'true');

以下代码位于go文件

func CORSMiddleware() gin.HandlerFunc {
    return func(c *gin.Context) {
        // host := strings.Split(c.Request.Host, ":8080")
        c.Writer.Header().Set("Content-Type", "application/json")
        // c.Writer.Header().Set("Access-Control-Allow-Origin", "http://"+host[0])
        c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
        c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
        c.Writer.Header().Set("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE")
        // c.Writer.Header().Set("Access-Control-Allow-Headers", "Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, Ip, X-Requested-With, access-control-allow-credentials ")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
    }
}

也使用核心包

router.Use(cors.Default())

Answer 1

你必须从服务器端代码启用cors。

func setupResponse(w *http.ResponseWriter, req *http.Request) {
    (*w).Header().Set("Access-Control-Allow-Origin", "*")
    (*w).Header().Set("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE")
    (*w).Header().Set("Access-Control-Allow-Headers", "Accept, Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization")
}

func yourApi(w http.ResponseWriter, req *http.Request) {
    setupResponse(&w, req) 

    // process the request...
}

Answer 2

您可以在开发过程中在本地Chrome副本上禁用CORS。如果您使用的是MAC OS，请在终端中输入以下命令：

open -a Google\ Chrome --args --disable-web-security --user-data-dir

此步骤将禁用许多（如果不是全部）Chrome安全功能，因此请谨慎操作。如果您无法控制服务器端，那么这将消除您的错误，并允许您继续进行开发。

在预检请求中发送自定义标题OPTIONS angular 5

2 个答案: