PHP 跨域问题的解决方法常见有以下轿旅几种：
使用历则 JSONP：肢帆棚通过动态创建 script 标签的方式，可以实现从不同的域名请求数据。
使用 CORS（跨域资源共享）：通过在服务端设置 Access-Control-Allow-Origin 响应头，来允许特定域名请求数据。
使用代理：通过代理服务器请求数据，避免了跨域问题。
使用 Nginx 反向代理：通过配置 Nginx 反向代理，来实现跨域请求。
以下是使用 CORS 通过添加响应头来解决跨域问题的一个例子：
// 设置允许来自任何域名的请求
header("Access-Control-Allow-Origin: *")
// 设置允许请求方法（例如GET、POST等）
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE")
// 设置允许请求头
header("Access-Control-Allow-Headers: X-Requested-With, Content-Type")
// 如果请求是通过 AJAX 发起的，还需要在请求头中添加 X-Requested-With: XMLHttpRequest。
如果对你有所帮助，就点个赞再走吧~
一个请求url的** 协议、端口、域名 **其中任意一个与当前页面url不相同就是跨域
即：https://www.segmentfault.com:8080/ （http/https）协议、（segmentfault）主域名、（www）子域名、（8080）端口
是因为浏览器的同源策略的限制，同源策略是一种安全策略，同源指的是域名，协议，端口相同，会阻止一个域的js脚本和另一个域的内容进行交互。防止在一个浏览器中的两个页面产生不安全、异常的行为。
当然如果不同源的话会产生一定的限制：
【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
【2】无法接触非同源网页的 DOM
【3】无法向非同源地址发送 AJAX 请求
document.createElement(‘script’) 生成一个 script 标签，然后插 body 里而已。
JSONP的实现原理就是创建一个script标签, 再把需要请求的api地址放到src里. 这个请求只能用GET方法, 不可能是POST（向服务端传送数据）。
一种非正式传输协议，它会允许用户传递一个callback参数给服务端，然后服务端返回数据的时候会将这个callback参数作为函数名来包裹住JSON数据，然后客户端就可以随意的定义自己的函数来处理返回的数据了。
一般是后端在处理请求数据的时候，添加允许跨域的请求头信息，服务端设置Access-Control-Allow-Origin就可以，如果需要携带cookie，前后端都需要设置
window对象有个name的属性，在一个window下，窗口载入的页面都是共享一个window.name。
在a.html中，怎么把b.html页面加载进来，获取b.html的数据。在a.html页面使用iframe，可以去获取b.html的数据，然后在a.html页面中取得iframe获取得数据。
但是iframe想要获局渣取b.html中的数据，只需要给这个iframe的src设为轮腊唯http://localhost:8000/b.html就可以，如果a.html想要得到iframe所获得的数据，也就是iframe的window.name的值，还要把这个iframe的src设成跟a.html页面同一个域才可以，不然a.html访问不到iframe里的window.name属性。
// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title'腊培)
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com')
调用message事件，监听对方发送的消息
// 监听 message 消息
window.addEventListener('message', function (e) {
console.log(e.source)// e.source 发送消息的窗口
console.log(e.origin)// e.origin 消息发向的网址
console.log(e.data) // e.data 发送的消息
},false)
server{
# 监听9099端口
listen 9099
# 域名是localhost
server_name localhost
#凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871
location ^~ /api {
proxy_pass http://localhost:9871
}
}
// 请求的时候直接用回前端这边的域名http://localhost:9099，这就不会跨域，然后Nginx监听到凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://localhost:9871
fetch('http://localhost:9099/api/iframePost', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
msg: 'helloIframePost'
})
})
在数据测试时基本都要涉及到跨域请求和提取header中的字段，网上有很多方法，但一定能成功，以下两段记录了本次网站前后端接口测试过程中两个主要的微小问题。
解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置 JavaScript端需要设置的headers信息 方能实现。
此处手札 供后人参考~
1.第一步 服务端设置响应头
header('Access-Control-Allow-Origin:*') //支持全域名访问，不安全，部署后需要固定限制为客户端网址
header('Access-Control-Allow-Methods:POST,GET,OPTIONS,DELETE')//支持的http 动作
header('Access-Control-Allow-Headers:x-requested-with,content-type') //响应头 请按照自己需求添加。
2.第二部 了解IE chrome 等浏览器 对于 跨域请求并要求设置Headers自定义参闷慧数的时候的 "预请求" 就是如果遇到 跨域并设置headers的请求，所有请求需要两步完成！
A 第一步：发送预请求 OPTIONS 请求。此时 服务器端需要对于OPTIONS请求作出响应 一般使用202响应即可 不用返回任何内容信息。（能看到这份手稿的人，本人不相信你后台处理不了一个options请求）
B 第二步：服务器accepted 第一步请求后 浏览器自动执行第二步 发送真正纳旦的请求。此时 大多数人 会发现请求成功了，但是 有那么几个人会发现 请求成功了但是没有任何信息返回 why？因为你自定义的请求头在服务器响应中不存在！
查看console输出 会发现一个问题：
“Access-Control-Allow-Headers 列表中不存在请蚂茄答求标头 XXXXXX”【IE】，
request header field xxxxxx is not allowed by Access-Control-Allow-Header【chrome】
这是因为 你的XXXX请求头 没有在服务器端被允许哦~
遇到这个问题 只有通过修改服务器端来完成，举例：需要设置 requesttype这么一个自定义头，那么 你需要在 服务端里面 将header('Access-Control-Allow-Headers:x-requested-with,content-type，requesttype') 同学们自行体会吧 这种语法就是根据“,”分割 自己需要设置什么头，必须要在 服务端请求的响应头里面设置好，不然客户端永远永远提交不上去！
转自： http://www.cnblogs.com/cdemo/p/5158663.html
3）Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest
对象的getResponseHeader()
方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma
如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader('FooBar')可以返回FooBar字段的值。
转自： http://www.ruanyifeng.com/blog/2016/04/cors.html
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）