Cross-Origin 请求已阻止，header Access-Control-Allow-Origin 缺失

Question

我正在写一个博客应用程序，它的前端是 react + typescript，后端是 go iris。我正在执行获取博客内容的请求。后端在 localhost:5000 运行，节点在 localhost:3000。但它失败并显示错误

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/getposts. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

我已经在后端配置了CORS

Cors := cors.New(cors.Options{
        AllowedOrigins:   []string{"http://localhost:3000"},
        AllowCredentials: true,
        AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS"},
        AllowedHeaders:   []string{"Cache-Control", "X-File-Name", "X-Requested-With", "X-File-Name", "Content-Type", "Authorization", "Set-Cookie", "Cookie"},
        Debug:            true,
    })
authConfig := basicauth.Config{
        Users:   map[string]string{USER_NAME: PASSWORD},
        Realm:   "Authorization Required", // defaults to "Authorization Required"
        Expires: time.Duration(30) * time.Minute,
    }

authentication := basicauth.New(authConfig)
app := iris.New()
app.Use(Cors)
app.Get("/getposts", authentication, GetPostsHandler)

这是我发送请求的方式

fetch("http://localhost:5000/getposts", {
  method: "get",
  credentials: "include",
  mode: "cors",
  headers: [
    ["Content-Type", "application/json"],
    ["Authorization", "Basic " + btoa("Sreyas:password")]
  ]
})
  .then(response => {
    if (response.ok) {
      response.json().then(rawdata => {
        this.setState({ blogdata: rawdata });
      });
    } else {
      console.log("No posts");
      this.setState({ blogdata: null });
    }
  })
  .catch(error => {
    console.log("Server Error");
    this.setState({ blogdata: null });
  });

我搜索并尝试了几个小时来解决这个问题，但没有成功。

Answer 1

感谢 Slotheroo 建议使用 nginx，这是我克服这个问题的唯一可能方法 problem.I 使用 nginx 来代理请求并将前端和后端路由到 8000 端口。我将在此处留下我的 nginx 服务器配置示例和对代码所做的更改，以便将来对任何人有所帮助:)

（请注意，像 "localhost" 这样使用环回 ip 会影响加载和发送请求的性能，因此请使用机器的确切 ip 来克服此类性能问题）

nginx.conf

server {
        listen       8000;
        server_name  localhost;

        location / {
            proxy_pass http://localhost:3000;
        }
        location /getposts {
            proxy_pass http://localhost:5000/getposts;
        }

    }

已将 localhost:8000 添加到后端的允许来源

AllowedOrigins:   []string{"http://localhost:8000"},

请求现在发送到 8000 端口

fetch('http://localhost:8000/getposts',{
                    method: 'get',
                    credentials: "include",
                    mode: "cors",
                    headers: [
                        ["Content-Type", "application/json"], 
                        ["Authorization","Basic "+btoa('Sreyas:password')],
                    ]     
            }).then((response) => {
                if(response.ok){
                    response.json().then(rawdata =>{
                        this.setState({blogdata:rawdata})
                    })
                }else{
                    console.log("No posts")
                    this.setState({blogdata:null})
                }
            }).catch(error => {
                console.log("Server Error")
                this.setState({blogdata:null})
              })
    }

Cross-Origin 请求已阻止，header Access-Control-Allow-Origin 缺失

Cross-Origin Request Blocked, header Access-Control-Allow-Origin missing

go

fetch

typescript

reactjs

go-iris