浏览器不允许Cross Origin调用

时间:2016-09-15 10:40:09

标签: angularjs spring cors

我正在尝试将一个应用程序调用到我正在获取的另一个应用程序并且错误为“请求头字段在预检响应中的Access-Control-Allow-Headers不允许授权”。在我的后端,我使用了下面提到的代码

     List<String> originList = Arrays.asList(origins.trim().split("( )*,( )*"));
    String origin = request.getHeader("Origin");
    if (originList.contains(origin)) {
        originAllow = origin;
    } else {
        originAllow = originList.get(0);
    }
     response.setHeader("Access-Control-Allow-Origin", originAllow);
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Methods", "PUT, POST, GET, OPTIONS, DELETE, PATCH");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with, accept, authorization");
    response.setHeader("Access-Control-Expose-Headers", "Location");

在originAllow中我传递了我想要访问的网址,但是我收到了以下错误,

     XMLHttpRequest cannot load http://<<url>>. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

请找到浏览器请求和响应标头,       响应标题     

Access-Control-Allow-Headers:x-requested-with, content-type
    Access-Control-Allow-Methods:GET OPTIONS
    Access-Control-Allow-Origin:*
    Access-Control-Max-Age:3600
    Allow:GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH
    Connection:close
    Content-Length:0
    Content-Type:text/plain; charset=UTF-8
    Server:Apache-Coyote/1.1
    X-Application-Context::8080
    
    
    Request Header
    Accept:/
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8,ms;q=0.6
Access-Control-Request-Headers:authorization, x-requested-with
Access-Control-Request-Method:GET
Connection:keep-alive
Host:myrestapi-dev
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36

OPTIONS <>?page=0&search_param=test&size=10,desc HTTP/1.1 Host: myrestapi-dev Connection: keep-alive Access-Control-Request-Method: GET Origin: http://localhost:9000 User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36 Access-Control-Request-Headers: authorization, x-requested-with Accept: / Referer: http://localhost:9000/ Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8,ms;q=0.6

我在localhost:port中运行应用程序,而另一个应用程序正在使用已部署的URL,其中协议,主机不同。

请告诉我有什么我需要添加来从ui(角度)访问网址进行授权而且它在其他浏览器中工作但不在chrome中

1 个答案:

答案 0 :(得分:0)

这是因为您的服务器不允许授权标头。 解决它:

response.setHeader("Access-Control-Allow-Headers", "Content-Type, authorization");

应该帮助你。因为我不确定你的后端我需要解释一下。 这是因为由服务器指定它接受跨源请求(并且它允许Content-Type请求标头)。此外,您需要从同一域进行AJAX调用或使服务器端更改,允许来自外部域的请求。要解决此问题,您需要通过在标头中允许外部域来更改http://yourdomain.com中的标头:

Access-Control-Allow-Origin: *

1- ref1

2- ref2

AngularJs中的可能解决方案。:将JSONP与Angular一起使用

AngularJS $ http服务有一个名为“jsonp”的内置方法。

var url = "some REST API Url" + "?callback=JSON_CALLBACK";

$http.jsonp(url)
    .success(function(data){
       // whatever 
    });

此外,网址必须附加?callback = JSON_CALLBACK。

我将使用JSONP扩展此解决方案

exampleurl = 'http://wikidata.org/w/api.php?whatever....&format=json'

 //Number 1 : 
 $.ajax({
  dataType: "jsonp",
  url: exampleurl ,
  }).done(function ( data ) {
  // do whatever
});
//Number 2 : 
$.ajax({
  dataType: "json",
  url: exampleurl + '&callback=?',
  }).done(function ( data ) {
  // do whatever
});
//Number 3 : 
$.getJSON( exampleurl + '&callback=?', function(data) {
  // do whatever
});

更多信息

1- getJson

2 - $.Ajax