GVKun编程网logo

Access-Control-Allow-Origin与跨域（allow origin 跨域）

11

如果您对Access-Control-Allow-Origin与跨域感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于Access-Control-Allow-Origin与跨

如果您对Access-Control-Allow-Origin与跨域感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于Access-Control-Allow-Origin与跨域的详细内容，我们还将为您解答allow origin 跨域的相关问题，并且为您提供关于Access-Control-Allow-Origin 与 Ajax 跨域、Access-Control-Allow-Origin 标头如何工作？ - How does Access-Control-Allow-Origin header work?、Access-Control-Allow-Origin 跨域问题、Access-Control-Allow-Origin与Ajax跨域的有价值信息。

本文目录一览：

Access-Control-Allow-Origin与跨域（allow origin 跨域）

Access-Control-Allow-Origin与跨域（allow origin 跨域）

什么是跨域？

JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。在某域名下使用Ajax向另一个域名下的页面请求数据，会遇到跨域问题。怎样才能算跨域？协议，域名，端口都必须相同，才算在同一个域。通常来说,跨域分为以下几类：

url 说明 是否允许通讯
http://www.a.com/a.js
http://www.a.com/b.js		 同一域名下 允许
http://www.a.com/lab/a.js
http://www.a.com/script/b.js		 同一域名下不同文件夹 允许
http://www.a.com:8000/a.js
http://www.a.com/b.js		 同一域名，不同端口 不允许
http://www.a.com/a.js
https://www.a.com/b.js		 同一域名，不同协议 不允许
http://www.a.com/a.js
http://170.32.82.74/b.js		 域名和域名对应ip 不允许
http://www.a.com/a.js
http://script.a.com/b.js		 同一域名，不同二级域名 不允许
http://www.a.com/a.js
http://a.com/b.js		 二级域名和一级域名 不允许（cookie这种情况下也不允许访问）
http://www.b.com/a.js
http://www.a.com/b.js		 不同域名 不允许

跨域例子

此例子存在跨域问题，如需测试，修改地址即可。

<html>  
    <head>  
        <title>title</title>  
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"/> <script> $.ajax({ url:"http://map.oicqzone.com/gpsApi.PHP?lat=22.502412986242&lng=113.93832783228",type:'GET',success: function(data){ $('body').append( "Name: " + data ); } }); </script>  
    </head>  
    <body>     
    测试Ajax跨域问题 
    </body> 
</html>

执行代付，会返回如下错误信息：

XMLHttpRequest cannot load http://map.oicqzone.com/gpsApi.PHP?lat=22.502412986242&lng=113.93832783228. 
Origin http://localhost is not allowed by Access-Control-Allow-Origin. AJAX

解决跨域问题

需要在目标页面的response中包含Access-Control-Allow-Origin这个header信息，并且它的值里有请求的域名时，浏览器才允许拿到它页面的数据进行下一步处理。如：

Access-Control-Allow-Origin: http://www.a.com

如果它的值设为 * ，则表示谁都可以用，当然这在生产环境中是不被允许的。

Access-Control-Allow-Origin: *

与Spring集成使用

新建CORSInterceptor类，实现handlerinterceptor接口，并重写preHandle方法，在此方法中为Header添加此信息：

public class CORSInterceptor implements handlerinterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request,HttpServletResponse response,Object handler) throws Exception {

        response.addheader("Access-Control-Allow-Origin","http://www.a.com");

        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request,Object handler,ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest request,Exception ex) throws Exception {

    }
}

然后在Spring配置文件中实例化此类：

<mvc:interceptor>
    <mvc:mapping path="/**"/>
    <bean class="com.test.CORSInterceptor"/>
</mvc:interceptor>

参考文章：
http://www.tuicool.com/articles/7FVnMz
http://my.oschina.net/BearCatYN/blog/509590
http://www.oicqzone.com/pc/2014083019610.html

Access-Control-Allow-Origin 与 Ajax 跨域

Access-Control-Allow-Origin 与 Ajax 跨域

问题

在某域名下使用 Ajax 向另一个域名下的页面请求数据，会遇到跨域问题。另一个域名必须在 response 中添加 Access-Control-Allow-Origin 的 header，才能让前者成功拿到数据。

这句话对吗？如果对，那么流程是什么样的？

跨域

怎样才能算跨域？协议，域名，端口都必须相同，才算在同一个域。

参考：

  • Are different ports on the same server considered cross-domain? (Ajax-wise) 
  • 同事李栋的博客：跨源资源共享

当跨域访问时，浏览器会发请求吗

这是真正困扰我们的问题，因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的，直接就禁止了呢？

我在 jsbin 上 做了一个试验 ，使用 Chrome 打开。当点击 “Run with Js” 时，控制台上会打出：

XMLHttpRequest cannot load http://google.com/. No ''Access-Control-Allow-Origin'' header is present on the requested resource. Origin ''http://run.jsbin.io'' is therefore not allowed access.

但开发者工具的”Network” 栏并没有任何记录。它到底发请求了没？

我又使用 python -m SimpleHTTPServer 在本地创建了一个小服务器，然后把地址改成它，结果发现在 python 这边的确打印出请求来了，可见浏览器的确发出了请求。

Access-Control-Allow-Origin

现在该 Access-Control-Allow-Origin 出场了。只有当目标页面的 response 中，包含了 Access-Control-Allow-Origin 这个 header，并且它的值里有我们自己的域名时，浏览器才允许我们拿到它页面的数据进行下一步处理。如：

Access-Control-Allow-Origin: http://run.jsbin.io

如果它的值设为 * ，则表示谁都可以用：

Access-Control-Allow-Origin: *

没错，在产品环境中，没人会用 *

你可以阅读下面这篇文章了解更多，并可找到其中的”Run Sample” 链接，实际体验一下：

http://www.html5rocks.com/en/tutorials/cors/

public HttpResponseMessage Get(string fatherId)
{
	string str = JsonConvert.SerializeObject(GetAleCategorysByFid(fatherId), Formatting.Indented);           
	HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };
	result.Headers.Add("Access-Control-Allow-Origin", "*");
	return result;
}

Access-Control-Allow-Origin 标头如何工作？ - How does Access-Control-Allow-Origin header work?

Access-Control-Allow-Origin 标头如何工作？ - How does Access-Control-Allow-Origin header work?

问题：

Apparently, I have completely misunderstood its semantics. 显然，我完全误解了它的语义。 I thought of something like this: 我想到了这样的事情：

  1. A client downloads javascript code MyCode.js from http://siteA - the origin . 客户端从 http：//siteA- origin 下载 javascript 代码 MyCode.js。
  2. The response header of MyCode.js contains Access-Control-Allow-Origin: http://siteB , which I thought meant that MyCode.js was allowed to make cross-origin references to the site B. MyCode.js 的响应标头包含 Access-Control-Allow-Origin：http：// siteB ，我认为这意味着 MyCode.js 被允许对站点 B 进行跨域引用。
  3. The client triggers some functionality of MyCode.js, which in turn make requests to http://siteB, which should be fine, despite being cross-origin requests. 客户端触发了 MyCode.js 的某些功能，该功能继而向 http：//siteB 发出了请求，尽管这是跨域请求，但仍然可以。

Well, I am wrong. 好吧，我错了。 It does not work like this at all. 它根本不像这样工作。 So, I have read Cross-origin resource sharing and attempted to read Cross-Origin Resource Sharing in w3c recommendation 因此，我阅读了跨域资源共享，并尝试阅读 w3c 建议中的跨域资源共享

One thing is sure - I still do not understand how am I supposed to use this header. 可以确定的一件事 - 我仍然不明白我应该如何使用此标头。

I have full control of both site A and site B. How do I enable the javascript code downloaded from the site A to access resources on the site B using this header? 我对站点 A 和站点 B 都拥有完全控制权。如何使用此标头使从站点 A 下载的 javascript 代码能够访问站点 B 上的资源？

PS 聚苯乙烯

I do not want to utilize JSONP. 我不想利用 JSONP。

解决方案：

参考一： https://stackoom.com/question/id4F/Access-Control-Allow-Origin 标头如何工作
参考二： https://oldbug.net/q/id4F/How-does-Access-Control-Allow-Origin-header-work

Access-Control-Allow-Origin 跨域问题

Access-Control-Allow-Origin 跨域问题

                          跨域配置逻辑说明

 

  1. 在 springboot 启动时，添加允许跨域的相关配置。
  2. 在 spring 收到请求后，会在跨域配置的列表中，匹配相应的 host 地址和 uri，如果存在相应的 host 地址和 uri，就在 response 中添加允许跨域的 header 
    Access-Control-Allow-Origin:http://127.0.0.1:8080
  3. 当浏览器收到上面的 header 时，就会允许跨域请求

  4. Access-Control-Allow-Credentials 响应头表示，是否可以将对请求的响应暴露给页面。返回 true 则可以，其他值均不可以。

    https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Allow-Credential

Spring boot 配置代码：

@Configuration
public class WebConfig extends WebMvcConfigurerAdapter {
    
    public void addCorsMappings(CorsRegistry registry) {
      registry.addMapping("/task/rest/getUnReadMessageNumber")//允许跨域的uri
        .allowedOrigins("*")  //允许跨域的请求host
        .allowedMethods("GET", "POST")  //允许跨域的请求方式
        .allowedHeaders("*")           //允许跨域的header
        .allowCredentials(true)        //是否有资格把响应内容，暴露到页面 
        .maxAge(72000L);       //token时长
    }

}

允许跨域例子:

 

Access-Control-Allow-Origin与Ajax跨域

Access-Control-Allow-Origin与Ajax跨域

问题

在某域名下使用Ajax向另一个域名下的页面请求数据，会遇到跨域问题。另一个域名必须在response中添加Access-Control-Allow-Origin的header，才能让前者成功拿到数据。

这句话对吗？如果对，那么流程是什么样的？

跨域

怎样才能算跨域？协议，域名，端口都必须相同，才算在同一个域。

参考：

  • Are different ports on the same server considered cross-domain? (Ajax-wise)
  • 同事李栋的博客：跨源资源共享

当跨域访问时，浏览器会发请求吗

这是真正困扰我们的问题，因为我们不清楚浏览器会怎么做。它会不会检查到你要请求的地址不是同一个域的，直接就禁止了呢？

我在jsbin上做了一个试验，使用Chrome打开。当点击“Run with Js”时，控制台上会打出：

XMLHttpRequest cannot load http://google.com/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.jsbin.io' is therefore not allowed access.

但开发者工具的”Network”栏并没有任何记录。它到底发请求了没？

我又使用python -m SimpleHTTPServer在本地创建了一个小服务器，然后把地址改成它，结果发现在python这边的确打印出请求来了，可见浏览器的确发出了请求。

Access-Control-Allow-Origin

现在该Access-Control-Allow-Origin出场了。只有当目标页面的response中，包含了Access-Control-Allow-Origin这个header，并且它的值里有我们自己的域名时，浏览器才允许我们拿到它页面的数据进行下一步处理。如：

Access-Control-Allow-Origin: http://run.jsbin.io

如果它的值设为*，则表示谁都可以用：

*

没错，在产品环境中，没人会用*

你可以阅读下面这篇文章了解更多，并可找到其中的”Run Sample”链接，实际体验一下：

http://www.html5rocks.com/en/tutorials/cors/

public HttpResponseMessage Get(string fatherId)
{
	string str = JsonConvert.SerializeObject(GetAleCategorysByFid(fatherId),Formatting.Indented);           
	HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str,Encoding.GetEncoding("UTF-8"),"application/json") };
	result.Headers.Add("Access-Control-Allow-Origin","*");
	return result;
}

今天关于Access-Control-Allow-Origin与跨域和allow origin 跨域的讲解已经结束，谢谢您的阅读，如果想了解更多关于Access-Control-Allow-Origin 与 Ajax 跨域、Access-Control-Allow-Origin 标头如何工作？ - How does Access-Control-Allow-Origin header work?、Access-Control-Allow-Origin 跨域问题、Access-Control-Allow-Origin与Ajax跨域的相关知识，请在本站搜索。

本文标签：

上一篇ajax老是执行error回调而不执行success回调（ajax失败回调）

下一篇ajax 请求canceled的问题（ajax请求出错）

相关文章