js中的跨域问题以及解决方法

一、什么是跨域?

在了解跨域之前,就要先了解什么是同源策略。简单来讲同源策略就是浏览器为了保证用户信息的安全,防止恶意的网站窃取数据,禁止不同域之间的JS进行交互。对于浏览器而言只要域名、协议、端口其中一个不同就会引发同源策略。

简单来讲,跨域就是只要协议,域名,端口有任何一个的不同,就被当作是跨域。

解决跨域的方法:

1.跨域资源共享(CORS)

CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。

服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

只需要在后台中加上响应头来允许域请求!在被请求的Response header中加入以下设置,就可以实现跨域访问了!


2.通过jsonp跨域

JSONP是应用JSON的一种新方法,只不过是被包含在函数调用中的JSON,JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。

JSONP的原理:通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

jsonp的方式虽然简便,但有个缺点,就是只支持get请求,对于只支持post的接口就不支持了。通过后台设置Access-Control-*等header,可以解决跨域问题,而且get,post都支持。


3.Nginx代理

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.跨域问题是什么? 浏览器的同源策略是浏览器上为安全考虑的重要的安全策略。从一个域上加载的脚本不允许访问另外一个...
    hello_water阅读 1,436评论 0 2
  • 为什么会出现跨域? 同源策略限制,是浏览器最核心也是最基本的安全限制。同源是两个页面有相同的协议、域名、端口号,当...
    login32阅读 244评论 0 0
  • 出现跨域问题的原因: 同源策略 同源策略 三同 协议相同 域名相同 端口相同 同源策略目的 保证用户信息安全,防止...
    Husbin阅读 7,382评论 0 3
  • 一、产生原因 跨域是a页面想要获取b页面资源,如果a,b页面的协议、域名、端口号、子域名不同,所进行的访问都是跨域...
    李丹linda阅读 33,569评论 0 5
  • 跨域?他是浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。所谓同源是指:域名、协议、端口均相...
    jinhyang阅读 675评论 0 2

友情链接更多精彩内容