位置: IT常识 - 正文
Access-Control-Allow-Origin跨域解决及详细介绍(Access-Control-Allow-Origin 翻译)
发布时间：2024-01-15推荐整理分享Access-Control-Allow-Origin跨域解决及详细介绍(Access-Control-Allow-Origin 翻译)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:Access-Control-Allow-Origin,Access-Control-Allow-Origin 翻译,Access-Control-Allow-Methods,Access-Control-Allow-Headers,access-control-allow-origin 配置,Access-Control-Allow-Origin,Access-Control-Allow-Credentials,Access-Control-Allow-Origin,内容如对您有帮助，希望把文章链接给更多的朋友！
首先，跨域不是问题。是一种安全机制。 这是你在开发时、上线前就必须提前考虑到的安全问题并且采取合适的手段去避免这个问题带来的程序错误。不过通常情况下，前端开发的小伙伴们都非常坚信后端小伙伴的接口一定已经处理好了跨域这个需求。然而事实上许多的前端拿到的都是没有解决跨域的接口。又出于某种原因不便与后端交涉并且对方视乎态度不是很友好。在这种情况下作为前端的小伙伴们心里简直一万头草泥马飞过。
不过现在你不必为之犯困了，哪个后端要是不协助处理跨域导致的一系列问题的话，请将本文直接甩给后台，脸必须打响。要解决跨域必须由后端来一起协同解决，且主要解决工作在后端。
为了能够更加快速的解决跨域带来的问题，下面对跨域进行详细介绍。
一、跨域是什么
跨域是浏览器加载了与当前域名、协议、端口不同另一站点下的资源，这与各大支持JavaScript的浏览器的同源策略是违背的。所谓同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
比如说，下面的几个域名是同源的：
http://example.com/
http://example.com:80/
http://example.com/path/file
它们都具有相同的协议、相同的域名、相同的端口(不指定端口默认80)。
而下面几个域名是不同源的：
http://example.com/
http://example.com:8080/
http://www.example.com/
https://example.com:80/
https://example.com/
http://example.org/
http://ietf.org/
它们有不同的协议或不同的域名或不同的端口，要注意顶级域名和二级域名也是认为不同的域名。
二、解决跨域导致的问题
跨域并不会阻止请求的发出，也不会阻止请求的接受，跨域是浏览器为了保护当前页面，你的请求得到了响应，浏览器不会把响应的数据交给页面上的回调，取而代之的是去提示你这是一个跨域数据。提示就是一个报错提示，就像这样：
我们知道了浏览器是如何处理的了，才能对症下药来解决这个问题，下面介绍几种常用的跨域解决方法：
1、CORS，跨域资源共享
这是最靠谱也是非常科学的解决方案，通过上面的截图我们可以看到，它提示了一个：从某某位置请求的资源被阻挡了，因为没有在响应头里发现："Access-Control-Allow-Origin"的响应头。看到这个错误，我们不得不百度一下，这个Access-Control-Allow-Origin是个何方神圣。
通过Access-Control-Allow-Origin响应头，就告诉了浏览器。如果请求我的资源的页面是我这个响应头里记录了的"源"，则不要拦截此响应，允许数据通行。比如说下面示列了一个场景：
// 从 http://example.com 界面发出了一个请求到：http://example2.com，因为不同源，导致了跨域。
// 而 http://example2.com 返回了下面的响应头：
Content-Type: application/json;charset=utf-8
Content-Length: 3210
Server: apache
Access-Control-Allow-Origin: http://example.com
// 从 http://example.com 界面发出了一个请求到：http://example2.com，因为不同源，导致了跨域。// 而 http://example2.com 返回了下面的响应头：Content-Type: application/json;charset=utf-8Content-Length: 3210Server: apacheAccess-Control-Allow-Origin: http://example.com————————————————版权上一篇：图文详解vue.js devtools插件使用方法(图文详解一本通)
下一篇：（区别、详解、使用）module.exports与exports，export与export default，import 与require(建造师与建筑师的区别详解)
