AJAX 跨域解决方案 - CORS

YPHP 发布于2019-07-01 12:18 / 3180人阅读

摘要：同源策略是对的一个主要约束，它为通信设置了相同的域相同的端口相同的协议这一限制。试图访问上述限制之外的资源都会引发安全错误，除非采用被认可的跨域解决方案。这个方案叫做跨源资源共享。方案二弊端不支持请求。方案三与方案一类似。

什么是AJAX？

AJAX 是无需刷新页面就能够从服务器去的数据的一种方法，负责Ajax运作的核心对象是XMLHttpRequest(XHR)对象。

同源策略是对XHR的一个主要约束，它为通信设置了“相同的域、相同的端口、相同的协议”这一限制。
试图访问上述限制之外的资源都会引发安全错误，除非采用被认可的跨域解决方案。

这个方案叫做CORS（Cross-Origin Resource Sharing）跨源资源共享。

哪些访问属于跨域？

http://a.com 不允许访问 http://b.com(不同域)

http://a.com 不允许访问 https://a.com(同一域名，不同协议)

http://a.com 不允许访问 http://a.com:8080(同一域名，不同端口)

http://a.com 不允许访问 http://192.168.1.1(域名和域名对应的ip)

http://a.a.com 不允许访问 http://b.a.com(主域相同，子域不同)

三种解决方案：

方案一：

//弊端：存在浏览器兼容的问题

需要被请求方的服务端设置： Access-Control-Allow-Origin

切记：Access-Control-Allow-Origin 不可设置为 * ，设置为可访问的域名。

//设置可供访问的白名单
$white_list = ["http://cdn.abc.com","http://abc.com"];

$_SERVER["HTTP_ORIGIN"] //表示请求方的域名

$http_origin = "";
if (!empty($_SERVER["HTTP_ORIGIN"]) && in_array($_SERVER["HTTP_ORIGIN"],$white_list)) {
    $http_origin = $_SERVER["HTTP_ORIGIN"];

    //设置 header 信息
    header("Access-Control-Allow-Origin: {$http_origin}");
    header("Access-Control-Allow-Methods", "POST,GET");
    header("Access-Control-Allow-Credentials:true");  //允许访问Cookie
    header("Access-Control-Allow-Headers : X-Requested-With"); //设置Headers
}
//执行代码逻辑...

另：如果请求的是html，在文件里加上meta标签。

方案二:

//弊端：不支持 POST 请求。

使用 JSONP 进行解决跨域问题，网上文章蛮多的。

方案三：

与方案一类似。

修改Nginx Apache 配置：

//Nginx

http {
  ......
  add_header Access-Control-Allow-Origin *;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
  ......
}

Apache :


    ......
    Header set Access-Control-Allow-Origin *

大家可以根据自己的情况进行选择方案。

来源：http://mp.weixin.qq.com/s?__b...

Thanks ~

AD:

私有云海外云主机 js ajax跨域解决方案 ajax跨域 jquery ajax 跨域 ajax跨域访问

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30454.html

20K前端大佬面试(关于如何回答ajax跨域问题)

摘要：在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。在接触前端开发起，跨域这个词就一直以很高的频率在我们学习工作中重复出现，最近在工作中遇到了跨域的相关问题，这里我把它总结记录一下。关于跨域，有N种类型，现在我只专注于ajax请求跨域(ajax跨域只是属于浏览器同源策略中的一部分,其它的这里不做介绍)，内容...

Yangyang 2019-08-02 16:09 评论0 收藏0
ajax跨域，这应该是最全的解决方案了

摘要：关于，强烈推荐阅读跨域资源共享详解阮一峰另外，这里也整理了一个实现原理图简化版如何判断是否是简单请求浏览器将请求分成两类简单请求和非简单请求。前言从刚接触前端开发起，跨域这个词就一直以很高的频率在身边重复出现，一直到现在，已经调试过N个跨域相关的问题了，16年时也整理过一篇相关文章，但是感觉还是差了点什么，于是现在重新梳理了一下。个人见识有限，如有差错，请多多见谅，欢迎提出iss...

ytwman 2019-08-22 11:21 评论0 收藏0
再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，同源策略又会成为开发者的阻碍。在本文中，我们会简单介绍需...

enda 2019-08-21 17:55 评论0 收藏0
同源策略与CORS跨域

摘要：所以浏览器认为这是安全的。如果你细心的话你会发现，其实请求已经发送出去了，你只是拿不到响应而已。所以浏览器这个策略的本质是，一个域名的，在未经允许的情况下，不得读取另一个域名的内容。但浏览器并不阻止你向另一个域名发送请求。同源策略与CORS跨域 PS:这篇文章是紧接着JSONP原理和Ajax学习与理解写的,有些内容是承接了上两篇文章.这篇文章只算是我的个人学习笔记,内容没有经过精心排...

ninefive 2019-08-23 10:34 评论0 收藏0
【日常填坑】之ajax请求laravel的api接口

摘要：合适和够用是最完美的追求。比如从页面去请求的资源。它允许浏览器向跨源服务器，发出请求，从而克服了只能同源使用的限制。定义在中的路由都是无状态的，并且会应用中间件组。关于作者程序开发人员，不拘泥于语言与技术，目前主要从事PHP和前端开发，使用Laravel和VueJs，App端使用Apicloud混合式开发。合适和够用是最完美的追求。个人网站：http://www.linganm...

Arno 2019-06-27 15:31 评论0 收藏0