相关疑难解决方法(0)

我试图通过连接到Flask内置的RESTful API来使用JavaScript进行授权.但是,当我发出请求时,我收到以下错误:

XMLHttpRequest无法加载http:// myApiUrl/login.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.

我知道API或远程资源必须设置标题,但为什么在我通过Chrome扩展程序Postman发出请求时它可以正常工作？

这是请求代码:

$.ajax({
    type: "POST",
    dataType: 'text',
    url: api,
    username: 'user',
    password: 'pass',
    crossDomain : true,
    xhrFields: {
        withCredentials: true
    }
})
    .done(function( data ) {
        console.log("done");
    })
    .fail( function(xhr, textStatus, errorThrown) {
        alert(xhr.responseText);
        alert(textStatus);
    });

我使用Node/Express创建了一个小API并尝试使用Angularjs来提取数据,但是当我的html页面在localhost:8888上运行apache并且节点API在端口3000上侦听时,我得到了No'Access-Control-允许来源.我尝试使用node-http-proxy和Vhosts Apache但没有取得多大成功,请参阅下面的完整错误和代码.

"XMLHttpRequest无法加载localhost:3000.请求的资源上没有'Access-Control-Allow-Origin'标头.因此不允许来自"localhost:8888"."

// Api Using Node/Express    
var express = require('express');
var app = express();
var contractors = [
    {   
     "id": "1", 
        "name": "Joe Blogg",
        "Weeks": 3,
        "Photo": "1.png"
    }
];

app.use(express.bodyParser());

app.get('/', function(req, res) {
  res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')

我在客户端使用AngularJS $ http访问服务器端ASP.NET Web API应用程序的端点.由于客户端作为服务器托管在不同的域上,因此我需要CORS.它适用于$ http.post(url,data).但是只要我通过$ http.get(url)对用户进行身份验证并发出请求,我就会收到消息

The 'Access-Control-Allow-Origin' header contains multiple values 'http://127.0.0.1:9000, http://127.0.0.1:9000', but only one is allowed. Origin 'http://127.0.0.1:9000' is therefore not allowed access.

Fiddler告诉我,在成功的选项请求之后,get请求中确实有两个头条目.我做错什么地方在哪里？

更新

当我使用jQuery $ .get而不是$ http.get时,会出现相同的错误消息.所以AngularJS似乎没有问题.但哪里错了？

我使用的是Google Place API.

我希望得到关于类型帮助的地方的建议.

所以,我所做的是 -

var Google_Places_API_KEY = "AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM";      //Get it from - https://code.google.com/apis/console/?noredirect#project:647731786600:access
var language = "en";        //'en' for English, 'nl' for Nederland's Language


var Auto_Complete_Link = "https://maps.googleapis.com/maps/api/place/autocomplete/json?key="+Google_Places_API_KEY+"&types=geocode&language="+language+"&input=Khu";
$.getJSON(Auto_Complete_Link , function(result)
{
    $.each(result, function(i, field)
    {
        //$("div").append(field + " ");
        //alert(i + "=="+ field);
        console.error(i + "=="+ field);
    });
});

所以我要求的链接是 -

https://maps.googleapis.com/maps/api/place/autocomplete/json?key=AIzaSyAK08OEC-B2kSyWfSdeCzdIkVnT44bcBwM&types=geocode&language=en&input=Khu

如果我使用浏览器访问此链接,我可以获得类似的输出(请尝试ck​​) -

但是,如果我尝试使用jQuery的.getJSON或.ajax,我会通过此消息阻止我的请求 -

.

因此,XMLHTTPRequest被阻止 -

请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'null'访问.

我已经在StackOverflow中检查了这个问题的解决方案并通过这里,[这里4和这里,但无法完美地得到我的解决方案.

有谁能请赐教？

我在http://www.test.com上添加一个带有以下脚本的API :

<script src="http://apiendpoint.com/api/v1/api.js"></script>

<div id="api" data-apikey="LA59CJI9HZ-KIJK4I5-3CKJC"></div>

api.js

$(function () {

  apikey = $('#api').data('apikey');
  $("#api").load("http://apiendpoint.com?apikey=" + apikey);

})

当我加载页面时,我收到以下错误:

XMLHttpRequest无法加载 apiendpoint URL.CORS策略已阻止从" apiendpoint URL " 重定向到" apiendpoint URL ":请求的资源上没有"Access-Control-Allow-Origin"标头.因此,不允许对" 测试URL "进行访问.

在apiendpoint.com的路径中,我在.htaccess中添加了以下代码:

Header set Access-Control-Allow-Origin "*"

但它不起作用.

我尝试了对REST-API的ReactJS fetch调用,并希望处理响应.通话有效,我收到回复,我可以在Chrome开发工具中看到:

function getAllCourses() {
fetch('http://localhost:8080/course', {
    method: 'POST',
    mode: 'no-cors',
    credentials: 'same-origin',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        objectClass: 'course',
        crud: '2'
    })
}).then(function (response) {
    console.log(response);
    return response.json();

}).catch(function (err) {
    console.log(err)
});
}

当我尝试处理响应时,我得到了一个"SyntaxError:意外的输入结束"

return response.json();

console.log看起来像这样:

我的响应JSON看起来像这样,它是有效的,我用jsonlint检查它:

[
  {
    "0x1": {
      "users": [],
      "lectures": [],
      "owner": "0x2",
      "title": "WWI 14 SEA",
      "description": null,
      "objectClass": "course",
      "id": "course_00001"
    },
    "0x2": {
      "username": "system",
      "lectures": [],
      "course": null,
      "solutions": [],
      "exercises": [],
      "roles": [
        "0x3", …

我收到文件网址作为api的回复.当用户单击下载按钮时,应该下载该文件而不在新选项卡中打开文件预览.如何实现这个反应js？

我正在尝试使用以下代码从开发模式下的 React 应用程序获取无服务器函数。

let response = await fetch(url,
       {
           method: 'POST',
           mode: 'cors',
           body: "param=" + paramVar,
        })
        .then(response => response.json());

后端函数是一个Python Cloud函数，代码如下：

def main(request):
    # CORS handling
    if request.method == 'OPTIONS':
        # Allows GET requests from any origin with the Content-Type
        # header and caches preflight response for an 3600s
        headers = {
            'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, POST',
            'Access-Control-Allow-Headers': 'Content-Type',
            'Access-Control-Max-Age': '3600'
        }

        return ('', 204, headers)
    
    # Set CORS headers for the main request
    headers = {
        'Content-Type':'application/json', …

我在package.json中添加了proxy，效果很好，但是在npm run build之后，CORS问题再次浮出水面，有人知道在React中npm run build之后如何处理CORS问题。

我试图使用各种方法在axios请求中添加标头。但是，我未能在axios请求中添加'Access-Control-Allow-Origin'：'*'。我的代码如下：

package.json

  "proxy": {
      "*":{ "target" : "http://myurl"}
   } 

GetData.js

  axios.defaults.baseURL = 'http://myurl';
  axios.defaults.headers.post['Content-Type'] ='application/json;charset=utf-8';
  axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';
  axios.get(serviceUrl, onSuccess, onFailure)
  .then(resp => { 
        let result = resp.data;
        onSuccess(result);
  })
  .catch(error => {
        if(onFailure) {
            return onFailure(error);
        }
  })
 }

注意：它已从服务器端启用，目前仍无法使用。目前，我无法从服务器端更改代码，我的工作仅限于客户端。

我正在运行一个本地网络服务器,它向ngrok服务器运行XHR请求,也从我的PC运行.

我到了XMLHttpRequest cannot load http://foo.ngrok.io/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

似乎ngrok FAQ提到了CORS标题,但仅与基本身份验证有关 - 它没有提到如何设置标题以便我可以在开发中测试我的应用程序.

如何更改ngrok的CORS选项以允许从localhost加载请求？