访问控制允许 Origin 标头不存在于 fetch api 调用中

Question

所以我试图使用 isomorphic-fetch https://www.npmjs.com/package/isomorphic-fetch

我有一个用 go 编写的服务器，它返回 JSON 数据。这就是我打电话的方式 -

export function fetchDistricts(geoState) {

    return function (dispatch) {

        dispatch(requestDistricts(geoState));

        return fetch(`http://localhost:8100/districts/`)

            .then(response => {console.log(response);})

            .then(json => {

                console.log("json");

            });

}

我在 Chrome 控制台中收到此错误

Fetch API cannot load http://localhost:8100/districts/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8200' is therefore not allowed access.

这很奇怪，因为在我的处理程序中我正在这样做

func getDistricts(w http.ResponseWriter, r *http.Request) {

    w.Header().Set("Content-Type", "application/jsonp;charset=UTF-8")

    w.WriteHeader(http.StatusOK)

    w.Header().Set("Access-Control-Allow-Origin", "*")

    rows, err := db.Query("SELECT * from districts")

    //other code here

此外，这是有效的

var activitiesDfD =  $.ajax({

    url: "http://localhost:8100/district/1/activities",

    type: "GET",

    dataType: "json"

});

$.when(activitiesDfD).then(function(data, textStatus, jqXhr) {

为什么在使用 fetch API 时会失败，我该如何解决这个问题？

编辑-

我现在试过这个

func getDistricts(w http.ResponseWriter, r *http.Request) {

    w.Header().Set("Content-Type", "application/jsonp;charset=UTF-8")

    w.Header().Set("Access-Control-Allow-Origin", r.Header.Get(`origin`))

    w.WriteHeader(http.StatusOK)    

结合下面的两个建议 - 但错误是一样的。

Answer 1

几乎所有的网络浏览器都拒绝来源"*"。因此，"*"作为Access-Control-Allow-Origin标头发送会导致同源策略违规。幸运的是，有一个解决方法。如果您查看处理此问题的gin-cors代码，它会重新发送"origin"浏览器发送的标头。所以为了*工作，你必须这样做：w.Header().Set("Access-Control-Allow-Origin", r.Header.Get(`origin`))

Answer 2

我最终使用了这个中间件https://github.com/rs/cors，并且一切正常。