it-swarm.cn

为什么我的JavaScript在请求的资源上出现“No'Access-Control-Allow-Origin'标头”错误,当Postman没有?

我正在尝试使用 JavaScript 进行授权,通过连接到 RESTful_ api _ 内置于 Flask 。但是,当我发出请求时,我收到以下错误:

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);
    });
2143
Mr Jedi

如果我理解正确你正在做一个 XMLHttpRequest 到一个不同于你的页面的域。因此浏览器会阻止它,因为出于安全原因,它通常允许在同一Origin中发出请求。当您想要执行跨域请求时,您需要做一些不同的事情。关于如何实现它的教程是使用CORS

当您使用邮递员时,他们不受此政策的限制。引自Cross-Origin XMLHttpRequest

常规网页可以使用XMLHttpRequest对象从远程服务器发送和接收数据,但它们受到相同Origin策略的限制。扩展不是那么有限。扩展可以与其Origin之外的远程服务器通信,只要它首先请求跨源权限即可。

1124
MD. Sahib Bin Mahboob

这不是生产的修复或者必须向客户端显示应用程序时,这仅在UI和Backend development 处于不同的 servers 并且在生产中它们实际上是有用时才有用同一台服务器例如:在为任何应用程序开发UI时,如果需要在本地测试它指向后端服务器,那么这是一个完美的修复。对于生产修复,必须将CORS头添加到后端服务器以允许跨源访问。

简单的方法是在谷歌浏览器中添加扩展名以允许使用CORS进行访问。

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en-US

只要您希望允许访问no 'access-control-allow-Origin' header请求,只需启用此扩展。

在Windows中,将此命令粘贴到 run window中 

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

这将打开一个新的 chrome 浏览器,允许访问no 'access-control-allow-Origin' header请求。

485
shruti

如果你可以处理 _ json _ 作为回报,那么尝试使用 _ jsonp _ (注意结尾处的 _ p _ )来表示域之间的说话:

$.ajax({
  type: "POST",
  dataType: 'jsonp',
  ...... etc ......

了解有关使用JSONP的更多信息 此处

JSONP的出现 - 本质上是一个双方同意的跨站点脚本黑客 - 为强大的内容混搭打开了大门。许多着名网站都提供JSONP服务,允许您通过预定义的API访问其内容。

322
Gavin

如果你使用 _ php _ ,它解决起来非常简单。只需在处理请求的PHP页面的开头添加以下脚本:

<?php header('Access-Control-Allow-Origin: *'); ?>

警告: 这包含您的PHP文件的安全问题,攻击者可以调用它。您必须使用会话和cookie进行身份验证,以防止您的文件/服务遭受此攻击。您的服务容易受到 跨站点请求伪造 (CSRF)。

如果你正在使用 Node-red 你必须通过取消注释以下行来允许node-red/settings.js文件中的CORS:

// The following property can be used to configure cross-Origin resource sharing
// in the HTTP nodes.
// See https://github.com/troygoode/node-cors#configuration-options for
// details on its contents. The following is a basic permissive set of options:
httpNodeCors: {
 Origin: "*",
 methods: "GET,PUT,POST,DELETE"
},
200
shady sherif

我希望很久以前有人与我分享这个网站 http://cors.io/ 与构建和依赖我自己的代理相比,它可以节省大量时间。但是,当您转向生产时,拥有自己的代理是最好的选择,因为您仍然可以控制数据的所有方面。

一切你需要的:

https://cors.io/?http://HTTP_YOUR_LINK_HERE

168
yoshyosh

如果您正在使用 Node.js ,请尝试:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});

更多信息:ExpressJS上的CORS

67
Nguyen Tran

使用Ajax存在跨域问题。您必须确保在没有http://(或从www.访问并发布到相同路径,包括http://www.)的相同www.路径上访问您的文件,当通过www.路径访问时,浏览器认为这是另一个域,因此您可以看到问题所在是。您正在发布到其他域,并且由于Origin问题,浏览器会阻止流。

如果 _ api _ 未放置在您请求的同一主机上,则流被阻止,您将需要找到另一种与API通信的方式。

63
Alin Razvan

因为 
$ .ajax({type:“POST” - 调用 _ options _
$ .post( - 调用 _ post _

两者都是不同的Postman称之为“POST”,但当我们称之为“OPTIONS”时

对于c#web服务 - webapi  

请在<system.webServer>标记下的web.config文件中添加以下代码。这会奏效

<httpProtocol>
    <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
    </customHeaders>
</httpProtocol>

请确保您在ajax呼叫中没有犯任何错误

jQuery的

$.ajax({
    url: 'http://mysite.Microsoft.sample.xyz.com/api/mycall',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    type: "POST", /* or type:"GET" or type:"PUT" */
    dataType: "json",
    data: {
    },
    success: function (result) {
        console.log(result);    
    },
    error: function () {
        console.log("error");
    }
});

Angular 4问题请参考: http://www.hubfly.com/blog/solutions/how-to-fix-angular-4-api-call-issues/

注意: 如果您正在寻找下载内容 来自第三方网站 then 这对您没有帮助 。您可以尝试以下代码,但不能使用JavaScript。

System.Net.WebClient wc = new System.Net.WebClient();
string str = wc.DownloadString("http://mysite.Microsoft.sample.xyz.com/api/mycall");
48
George Livingston

试试 XDomain

简介:纯JavaScript CORS替代/ polyfill。无需服务器配置 - 只需在要与之通信的域上添加proxy.html。这个库使用XHook挂钩所有 _ xhr _ ,因此XDomain应该与任何库一起使用。

22
user3359786

如果你不想:

  1. 在Chrome中停用网络安全
  2. 使用JSONP
  3. 使用第三方网站重新路由您的请求

并且您确定您的服务器已启用CORS(在此测试CORS: http://www.test-cors.org/

然后你需要在你的请求中传递Origin参数。[。_____。]这个Origin必须匹配你的浏览器发送的Origin和你的请求。

你可以在这里看到它: http://www.wikinomad.com/app/detail/Campgrounds/3591

编辑功能将GET&POST请求发送到其他域以获取数据。我设置了Origin参数来解决问题。[。_____。]后端是一个mediaWiki引擎。

tldr:为你的调用添加“Origin”参数,这些参数必须是你的浏览器发送的Origin参数(你不能欺骗Origin参数)

11
Ganesh Krishnan

当我使用AngularJS访问我的API时,我遇到了问题。相同的请求在SoapUI 5.0和ColdFusion中有效。我的GET方法已经有了Access-Control-Allow-Origin标头。

我发现 AngularJS提出了“试用”OPTIONS请求 。默认情况下,ColdFusion会生成OPTIONS方法,但它没有太多,具体来说这些标头。响应OPTIONS调用生成错误,而不是我故意调用GET。在我将API OPTIONS方法添加到我的API后,问题已得到解决。

<cffunction name="optionsMethod" access="remote" output="false" returntype="any" httpmethod="OPTIONS" description="Method to respond to AngularJS trial call">
    <cfheader name="Access-Control-Allow-Headers" value="Content-Type,x-requested-with,Authorization,Access-Control-Allow-Origin"> 
    <cfheader name="Access-Control-Allow-Methods" value="GET,OPTIONS">      
    <cfheader name="Access-Control-Allow-Origin" value="*">      
    <cfheader name="Access-Control-Max-Age" value="360">        
</cffunction>
8
Leonid Alzhin

我有以下配置,在从服务器请求响应时导致相同的错误。

服务器端: SparkJava - >提供REST-API
客户端: ExtJs6 - >提供浏览器渲染 

服务器端 我必须将此添加到响应中: 

Spark.get("/someRestCallToSpark", (req, res) -> {
    res.header("Access-Control-Allow-Origin", "*"); //important, otherwise its not working 
    return "some text";
 });

客户端 我必须添加这个请求: 

Ext.Ajax.request({
    url: "http://localhost:4567/someRestCallToSpark",
    useDefaultXhrHeader: false, //important, otherwise its not working
    success: function(response, opts) {console.log("success")},
    failure: function(response, opts) {console.log("failure")}
});
8
kiltek

根据 shruti的回答 ,我创建了一个Chrome浏览器的快捷方式,其中包含所需的参数:[。_____。] enter image description here enter image description here

8
Mohammad AlBanna

https://github.com/Rob--W/cors-anywhere/ 提供(Node.js)代码,您可以使用它们来设置和运行自己的CORS代理。它主动维护并提供许多功能来控制代理行为,而不仅仅是基本发送正确的Access-Control-*响应头。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 有详细说明浏览器如何处理客户端Web应用程序通过JavaScript创建的跨源请求以及必须使用哪些标头如果可以,请配置服务器发送请求。

如果您需要向网站发出请求并获得响应的网站未返回Access-Control-Allow-Origin响应标头,则浏览器为 always 将阻止客户端直接发送对其的请求工作中的JavaScript代码。因此,如果站点不是您控制的站点并且可以为其配置行为,那么在这种情况下工作的唯一事情是代理请求 - 通过您自己的代理自己运行或通过开放代理。

正如在此处的其他评论中所提到的,有充分的理由不信任您的请求的开放代理。也就是说,如果您知道自己在做什么,并且您认为开放代理可以满足您的需求,那么 https://cors-anywhere.herokuapp.com/ 是一个可靠,可靠,可维护且运行良好的代理。 https://github.com/Rob--W/cors-anywhere/ code的一个实例。

与此处提到的其他开放代理(其中一些至少似乎不再可用)一样,它的工作方式是,不要让您的客户端代码直接向例如http://foo.com发送请求,而是将其发送给https://cors-anywhere.herokuapp.com/http://foo.com和代理将必要的Access-Control-*标头添加到浏览器看到的响应中。

7
sideshowbarker

您可以通过使用YQL通过Yahoo的服务器代理请求来绕过问题。它只是几行代码:

var yql_url = 'https://query.yahooapis.com/v1/public/yql';
var url = 'your api url';

$.ajax({
    'url': yql_url,
    'data': {
        'q': 'SELECT * FROM json WHERE url="'+url+'"',
        'format': 'json',
        'jsonCompat': 'new',
    },
    'dataType': 'jsonp',
    'success': function(response) {
        console.log(response);
    },
});

这是带有解释的链接: https://vverma.net/fetch-any-json-using-jsonp-and-yql.html

7
camnesia

如果您正在使用 Entity Framework ,即使启用了CORS,有时也会抛出此错误。我发现错误的发生是因为缺少查询的最终确定。我希望这会在同样的情况下帮助其他人。

以下代码可能会抛出XMLHttpRequest cannot load http://myApiUrl/login. No 'Access-Control-Allow-Origin' header is present on the requested resource.错误:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    });
}

要修复它,需要在查询结束时执行.ToList().FirstOrDefault()之类的终结调用,如下所示:

using (DBContext db = new DBContext())
{
    return db.Customers.Select(x => new
    {
        Name = x.Name,
        CustomerId = x.CustomerId,
    }).ToList();
}
5
Loyalar

在我的情况下,我使用的是JEE7 JAX-RS应用程序,并且以下技巧对我来说非常有效:

@GET
    @Path("{id}")
    public Response getEventData(@PathParam("id") String id) throws FileNotFoundException {
        InputStream inputStream = getClass().getClassLoader().getResourceAsStream("/eventdata/" + id + ".json");
        JsonReader jsonReader = Json.createReader(inputStream);
        return Response.ok(jsonReader.readObject()).header("Access-Control-Allow-Origin", "*").build();
    }
5
Bhuwan Gautam

如果您从浏览器收到此错误消息:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '…' is therefore not allowed access

当您尝试向远程服务器执行Ajax POST/GET请求时,请忘记这个简单的修复:

<?php header('Access-Control-Allow-Origin: *'); ?>

您真的需要,特别是如果您只使用JavaScript来执行Ajax请求,内部代理将接收您的查询并将其发送到远程服务器。

首先在您的JavaScript代码中,对您自己的服务器执行Ajax调用,例如:

$.ajax({
    url: yourserver.com/controller/proxy.php,
    async: false,
    type: "POST",
    dataType: "json",
    data: data,
    success: function (result) {
        JSON.parse(result);
    },
    error: function (xhr, ajaxOptions, thrownError) {
        console.log(xhr);
    }
});

然后,创建一个名为proxy.php的简单PHP文件来包装POST数据,并将它们作为参数附加到远程URL服务器。我举例说明了如何使用Expedia Hotel搜索API绕过此问题:

if (isset($_POST)) {
  $apiKey = $_POST['apiKey'];
  $cid = $_POST['cid'];
  $minorRev = 99;

  $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey;

  echo json_encode(file_get_contents($url));
 }

通过做:

echo json_encode(file_get_contents($url));

您只是在执行相同的查询,但在服务器端,之后,它应该可以正常工作。

复制并粘贴的答案 NizarBsb

4
Flash

我成功地能够使用htaccess解决(在我的情况下使用字体),但很明显,OP的要求稍有不同。但您可以使用FileMatch模式并添加任何类型的扩展名,以便它不会产生交叉错误。

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

https://httpd.Apache.org/docs/2.4/mod/core.html#filesmatch

4
Danish

对于GoLang API:

首先,您可以查看 MDN CORS Doc 了解CORS是什么。据我所知,CORS是否允许Origin Of Request访问Server Resource。

您可以通过在服务器响应的Header处设置Access-Control-Allow-Origin来限制Origin可以访问服务器的请求。

例如,在服务器响应中设置以下标头意味着只有从http://foo.example发送的请求才能访问您的服务器:

Access-Control-Allow-Origin: http://foo.example

以及允许从任何Origin(或域)发送的请求:

Access-Control-Allow-Origin: *

正如我在错误消息中所知,requested resource表示服务器的资源,因此No 'Access-Control-Allow-Origin' header is present on the requested resource.表示您没有在服务器响应中设置Access-Control-Allow-Origin标头,或者您可能设置但请求的原点不在Access-Control-Allow-Origin中列表,因此不允许请求访问:

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

在GoLang中,我使用gorilla/mux包在localhost:9091上构建API服务器,并通过将"Access-Control-Allow-Origin", "*"添加到响应头来允许CORS:

func main() { // API Server Code
    router := mux.NewRouter()
    // API route is /people,
    //Methods("GET", "OPTIONS") means it support GET, OPTIONS
    router.HandleFunc("/people", GetPeople).Methods("GET", "OPTIONS")
    log.Fatal(http.ListenAndServe(":9091", router))
}

// Method of '/people' route
func GetPeople(w http.ResponseWriter, r *http.Request) {

    // Allow CORS by setting * in sever response
    w.Header().Set("Access-Control-Allow-Origin", "*")

    w.Header().Set("Access-Control-Allow-Headers", "Content-Type")
    json.NewEncoder(w).Encode("OKOK")
}

我在客户端使用JavaScript,在localhost:9092上,Chrome的请求可以成功从服务器localhost:9091获取“OKOK”。

function GetPeople() {
    try {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "http://localhost:9091/people", false);
        xhttp.setRequestHeader("Content-type", "text/html");
        xhttp.send();
        var response = JSON.parse(xhttp.response);
        alert(xhttp.response);
    }
    catch (error) {
        alert(error.message);
    }
}

此外,您可以通过Fiddler等工具检查您的请求/响应标头。

4
yu yang Jian

热门问题 - 如果你已经阅读了这篇文章而另外没有其他任何内容有助于另一件事。如果您有一个CDN,如Akamai,Limelight或类似的CDN,您可能需要检查您拥有的资源URI的缓存密钥。如果它不包含Origin标头值,则可能在从另一个Origin请求时返回缓存的响应。我们只花了半天时间调试这个。 CDN配置已更新为仅包含我们的一些选定域的Origin值,并将其设置为null。这似乎有效,并允许来自我们已知域的浏览器查看我们的资源。当然所有其他答案都是到达这里的先决条件,但如果CDN是您浏览器的第一跳,则需要查看。 

在我们的案例中,我们可以看到一些请求进入我们的服务但不是几乎没有网站发送的卷。这向我们指出了CDN。我们能够返回并看到原始请求是通过直接请求提供的,而不是浏览器AJAX调用的一部分,并且未包含响应头Access-Control-Allow-Origin。显然,CDN缓存了这个值。 Akamai CDN配置Tweak将原始请求标头值视为匹配的一部分似乎已使其适用于我们。

4
No Refunds No Returns

很多时候,这种情况发生在我从javascript到我的php api,因为有几个原因之一。 我忘了把<?php header('Access-Control-Allow-Origin: *'); ?放在一起。这对跨子域访问很有帮助。另一个原因是因为在jQuery ajax请求中我指定了一个特定的dataType并返回一个不同的dataType,所以它抛出了一个错误。 

此错误的最后和最突出的原因是您请求的页面上存在解析错误。如果您在浏览器中点击该页面网址的可能性很大,您将看到一个解析错误,并且您将有一个行号来解决该问题。 

我希望这可以帮助别人。我每次花了一段时间来调试这个,我希望我有一份要核实的清单。

3
Garrett Tacoronte

在jsonp请求中,您应该捕获“jsonpCallback”并将其发送回去。

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

在后端(如果你用作后端PHP)

echo $_GET['callback'].'({"ip":"192.168.1.1"})';

在这种情况下,后端响应似乎 

jQuery331009526199802841284_1533646326884({ “IP”: “192.168.1.1”})

但你可以在前端手动设置一个“jsonpCallback”并在后端抓住他

$.ajax({
      url: lnk,
      type: 'GET',
      crossDomain: true,
      dataType: 'jsonp',
      jsonpCallback: 'get_ip',
      success: function (ip) { console.log(ip.ip); },
      error: function (err) { console.log(err) }
});

在这种情况下,后端响应似乎 

get_ip({ “IP”: “192.168.1.1”})

2
Alexey Kolotsey

在我的网站上(基于.NET)我刚刚添加了这个:

<system.webServer>
 <httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>         
</system.webServer>

非常感谢 这个 视频。

2
FrenkyB

如果你想在后端(在Flask中)修复它,而不是在前端,我会完全推荐Flask CORS python包。 Flask Cors

使用app.py中的一个简单行,您可以自动插入标准允许任何Origin标头,或根据需要自定义它。

2
Ben Watts

为了完整性, Apache 允许cors:

Header set Access-Control-Allow-Origin "http://www.allowonlyfromthisurl.com"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, Accept-Encoding, Accept-Language, Cookie, Referer"
2
zak

CORS适合你。

CORS是“跨源资源共享”,是一种发送跨域请求的方法。现在,XMLHttpRequest2和Fetch API都支持CORS。

但它有其局限性。服务器需要特定声明 Access-Control-Allow-Origin ,并且它不能设置为'*'。

如果你想任何Origin可以向你发送请求,你需要JSONP(还需要设置 Access-Control-Allow-Origin ,但可以是'*')。

对于很多请求方式,如果你不知道该选择什么,我认为你需要一个功能齐全的组件来做到这一点。让我介绍一个简单的组件catta


如果您使用的是现代浏览器(> Internet Explorer9,Chrome,Firefox,Edge等),建议您使用简单但美观的组件,https://github.com/Joker-果冻/ catta。它没有依赖关系,小于3 KB,它支持Fetch,Ajax和JSONP,具有相同的死语法和选项。

catta('./data/simple.json').then(function (res) {
  console.log(res);
});

它还支持导入项目的所有方式,如ES6模块,CommonJS甚至HTML中的<script>

2
Jelly

这些答案中的大多数都告诉用户如何将CORS标头添加到他们控制的服务器中。

但是,如果您需要来自服务器的数据而无法在网页中控制,则一种解决方案是在页面上创建脚本标记,将src属性设置为不具有CORS标头的api端点,然后加载该数据到页面上:

window.handleData = function(data) {
  console.log(data)
};

var script = document.createElement('script');
script.setAttribute('src','https://some.api/without/cors/headers.com&callback=handleData');
document.body.appendChild(script);
2
duhaime

我在Angular中使用$http.get得到了这个错误。我需要使用$http.jsonp代替。

2
Travis Heeter

也许这有点复杂,但你可以使用网络服务器来路由请求。[。_____。]对于nodejs,你没有这个问题。我不是节点js的专家。所以我不知道这是否是干净的代码。 

但这对我有用

这是一个小例子:

NODE JS

var rp = require('request-promise');
var express = require('express'),
    app = express(),
    port = process.env.PORT || 3000;
var options = {
    method: 'POST',
    uri: 'http://api.posttestserver.com/post',
    body: {
        some: 'payload'
    },
    json: true // Automatically stringifies the body to JSON
};
app.get('/', function (req, res) {
        rp(options)
        .then(function (parsedBody) {
            res.send(parsedBody)
        })
        .catch(function (err) {
            res.send(err)
        });
});
app.listen(port);

_ js _

axios.get("http://localhost:3000/").then((res)=>{
    console.log('================res====================');
    console.log(res);
    console.log('====================================');
})
1
KT Works

对于application_controller.rb中的Ruby on Rails服务器,添加以下内容:

after_action :cors_set_access_control_headers

def cors_set_access_control_headers
  headers['Access-Control-Allow-Origin'] = '*'
  headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS'
  headers['Access-Control-Allow-Headers'] = '*'
end
1
张健健

请求的资源上没有“Access-Control-Allow-Origin”标头。原因' https://sx.xyz.com '因此不允许访问。

我在Ajax响应中也遇到了类似的跨域数据交换问题 error undefined 。但标题中的响应是 状态代码:200 OK

Failed to load https://www.Domain.in/index.php?route=api/synchronization/checkapikey:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'https://sx.xyz.in' is therefore not allowed access.

解决它的解决方案: 在我的情况下,它是通过Ajax将函数checkapikey()调用到另一个域并获得带有调用的数据的响应:

if (($this->request->server['REQUEST_METHOD'] == 'POST') && isset($this->request->server['HTTP_Origin'])) {

        $this->response->addHeader('Access-Control-Allow-Origin: ' . $this->request->server['HTTP_Origin']);
        $this->response->addHeader('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
        $this->response->addHeader('Access-Control-Max-Age: 1000');
        $this->response->addHeader('Access-Control-Allow-Credentials: true');
        $this->response->addHeader('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');

        $headers = getallheaders();
...
}
1
Nishanth ॐ

这个解决方案绝对适合您。添加自定义消息句柄

public class CustomHeaderHandler : DelegatingHandler
{
    protected override async Task<HttpResponseMessage> SendAsync(
            HttpRequestMessage request, CancellationToken cancellationToken)
    {
        HttpResponseMessage response = await base.SendAsync(request, cancellationToken);
        var referrer = request.Headers.Referrer;
        if (referrer != null && !response.Headers.Contains("Access-Control-Allow-Origin"))
        {
            response.Headers.Add("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
        }
        return response;
    }
}

在webapiconfig.cs中注册。

config.MessageHandlers.Add(new CustomHeaderHandler());

如果您使用SignalR,请在globle.asax.cs文件中添加此代码

protected void Application_BeginRequest(object sender, EventArgs e)
        {
            var referrer = Request.UrlReferrer;
            if (Context.Request.Path.Contains("signalr/") && referrer != null)
            {
                Context.Response.AppendHeader("Access-Control-Allow-Origin", referrer.Scheme + "://" + referrer.Authority);
            }
        }
1
Ujjwal

对于Opera(它的工作原理与 Chrome 相同),我使用以下命令启动了浏览器:

opera --user-data-dir="~/Downloads/opera-session" --disable-web-security

问题已经解决了!现在我可以处理本地HTML文件(在我的硬盘驱动器上)并在同一文件中调用Ajax请求到远程源。

注1:您可以将主目录中的任何文件夹设为--user-data-dir。

注2:测试 Debian 8 (Jessie)/ Opera 39

Here is a screenshot

当您正常启动(没有上述参数)时,相同的请求将落入错误代码块。

0
csonuryilmaz

也许您可以将资源从生产服务器复制到开发服务器,并具有动态调整资源的URL。通过这种方式,您将始终从同一个Origin读取,从而消除了交叉Origin异常。

0
bachstein

在我的情况下,我使用spring boot作为服务,你可以在负责的操作上添加使用cross Origin注释。

@CrossOrigin(origins = "http://localhost:4200")
@RequestMapping(value = "getFoo", method = RequestMethod.GET)
public ResponseEntity getFoo(){
    // do something
} 
0
Chandan Kumar

我在自己的域中创建了一个简单的桥接器,它从外部域中获取并显示内容。

<?php
header("Content-Type: text/plain");
if (isset($_GET["cnic"]))
{
    $page = file_get_contents("https://external.domain.com/api/verify/" . $_GET["cnic"]);
    echo $page;
}
else
{
    echo "";
}

?>

现在,我没有在AJAX中访问外部域,而是放置了此桥文件的URL。

您应该根据需要调整Content-Type。如果数据是JSON,那么使用header("Content-Type: application/json");

0
Muhammad Saqib

只是提到另一种“绕过”它的方式 - AJAX代理。向您的服务器发送请求以从另一个Origin获取数据并将请求发回给您。

我更喜欢这种方法而不是JSONP,因为它有一些潜在的安全问题。

0
carobnodrvo

我通过为访问Web API的客户端URL启用CORS解决了这个问题,并且它成功运行。

例如:

[EnableCors(origins: "http://clientaccessingapi.com", headers: "*", methods: "*")]
0
Rizwan ali