英文:
Access Control Allow Origin header not present with fetch api call
问题
所以我正在尝试使用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")
//其他代码在这里
此外，这段代码是可以工作的：
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)
结合下面的两个建议 - 但错误仍然相同。
英文:
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.
答案1
得分: 1
几乎所有的网络浏览器都会拒绝使用"*"作为Access-Control-Allow-Origin头部的来源。因此，将"*"作为Access-Control-Allow-Origin头部发送会导致同源策略的违规。
幸运的是，有一个解决方法。如果你查看处理这个问题的gin-cors代码，它实际上是重新发送浏览器发送的"origin"头部。所以要使*起作用，你需要这样做：
w.Header().Set("Access-Control-Allow-Origin", r.Header.Get(`origin`))
英文:
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`))
答案2
得分: 0
我最终使用了这个中间件 https://github.com/rs/cors，并且一切都正常工作了。
英文:
I ended up using this middleware https://github.com/rs/cors, and that got everything working correctly.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论