访问控制允许Origin头与提取API调用不存在 [英] Access Control Allow Origin header not present with fetch api call

问题描述

因此，我尝试使用同构取法 https://www.npmjs.com/ package / isomorphic-fetch

我有一个写回去的服务器，它回馈JSON数据。这是我打电话的方式 -

  export function fetchDistricts（geoState）{
 
 return函数（dispatch）{
 dispatch（requestDistricts（geoState））; 
 
 $ b return fetch（`http：// localhost：8100 / districts /`）
 .then（response => {console.log（response）;}）
 .then（json => {
 console.log（json）; 
}）; 
} 
  

在chrome控制台中出现此错误

  Fetch API无法加载http：// localhost：8100 / districts /。请求的资源上没有Access-Control-Allow-Origin标题。因此不允许访问Origin'http：// localhost：8200'。 
  

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

  func getDistricts（w http.ResponseWriter，r * http.Request）{
 w.Header（）。Set（Content-Type， / jsonp; charset = UTF-8）
 w.WriteHeader（http.StatusOK）
 w.Header（）。Set（Access-Control-Allow-Origin，*）
 rows，err：= db.Query（SELECT * from districts）
 //此处的其他代码
  

此外，这是工作

  var activitiesDfD = $ .ajax（{
 url： http：// localhost：8100 / district / 1 / activities，
类型：GET，
 dataType：json
}）; 
 
 $ .when（activitiesDfD）.then（function（data，textStatus，jqXhr）{
  

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

编辑 -

我现在试过这个

  func getDistricts（w http.ResponseWriter，r * http.Request）{$ （Access-Control-Allow-Origin）设置（Content-Type，application / jsonp; charset = UTF-8）
 w.Header（）。Set ，r.Header.Get（'origin`））
 w.WriteHeader（http.StatusOK）
  

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

解决方案

几乎所有的网页浏览器都会拒绝来源<$因此发送*作为 Access-Control-Allow-Origin code>标题导致违反同源策略。

幸运的是有一个解决方法。如果你看看origin。 c $ c>浏览器发送的头。所以为了让 * 工作，你必须这样做：

  w.Header（）。Set（Access-Control-Allow-Origin，r.Header.Get（`origin`））
  

So I'm trying to use isomorphic-fetch https://www.npmjs.com/package/isomorphic-fetch

I have a server written in go that is giving back JSON data. This is how I'm making the call -

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");
            });
}

I get this error in the chrome console

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.

This is weird, because in my handler I am doing this

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

Further, this was working

var activitiesDfD =  $.ajax({
    url: "http://localhost:8100/district/1/activities",
    type: "GET",
    dataType: "json"
});

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

Why would this fail when using the fetch API and how do I get around this?

Edit-

I've now tried this

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)    

Incorporating the two suggestions below - but the error is the same.

解决方案

Almost all web browsers reject the origin "*". Therefore sending "*" as the Access-Control-Allow-Origin header results in a same-origin-policy violation.

Fortunately there is a work-around. If you look at the gin-cors code that handles this, what it does instead is to re-send the "origin" header sent by the browser. So to make * work, you'd have to do this:

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

这篇关于访问控制允许Origin头与提取API调用不存在的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！