码迷,mamicode.com
首页 > Web开发 > 详细

php跨域问题记录

时间:2019-02-18 19:18:20      阅读:220      评论:0      收藏:0      [点我收藏+]

标签:multi   chrome   cache   问控制   web服务   信息   mod   这一   关键字   

记录跨域问题

一、问题

在控制层加了如下代码:

header(‘Access-Control-Allow-Origin: ‘.$_SERVER[‘HTTP_ORIGIN‘] );
header(‘Access-Control-Allow-Credentials: true‘);
header(‘Access-Control-Allow-Headers: X-Requested-With,Content-Type,Accept‘);

打开chrome的network里的response,没有这几个值~

但是同样的代码我在本地另一个项目里是OK的,项目环境是Nginx做了层代理,实际用的是PHP当Apache模块的方式,就开始怀疑:

  • 输出时框架限制了
  • Nginx/Apache限制了header(ps:我们项目是用Nginx当了反向代理,PHP当Apache模块)
  • 灵魂拷问:PHP输出时这些header是怎么返回的?

二、解决

1.框架

用xdebug跟了下,没看到框架里有任何限制不能更改header

2.web服务器

看到response每次返回的都一样,以为是运维控制了返回的选项,不能随意添加,和运维同事沟通了下,发现确实是不能随意添加header头,窃喜以为找到了原因。然而另一个同事说加的跨域允许是OK的;Nginx的conf里加的proxy 也是把Apache返回的header都返回了,排除

3.文件问题

重新思考,跨域问题是浏览器控制的,只要HTTP协议里返回的access允许就可以了。

使用header_list()方法打印了下发送的header列表,发现自己写的那几个没返回。

换种思路,把这几行加到其他文件,发现可以,然后对比俩文件有啥区别,最后最后的原因是<?php这个标识是从第2行开始写的,即在header方法之前有了输出。

三、补充

1.同源策略

参考:

浏览器同源政策及其规避方法

跨域资源共享CORS详解

浏览器安全的基石是"同源政策",如果非同源,共有3种行为受到限制

  • cookie、LocalStorage和IndexDB(浏览器提供的本地数据库)无法读取
  • dom无法获得(如iframe和window.open如果不同源,就无法通信)
  • ajax请求不能发送

这里主要讨论下ajax的跨域解决方法,

2.跨域解决方式:

  • jsonp
  • cors
  • 反向代理

2.1 jsonp

全称:json for padding 本质是用<script>标签可以跨域访问的性质,动态创建一个script,然后回调js数据脚本,请求类型是js而非xhr.普通接口返回的是数据对象,而jsonp是js数据脚本

2.2 CORS

CORS是一个W3c标准,全称是“跨域资源共享”(cross-origin resource sharing),允许浏览器向跨源服务器,发出XMLHttpRequest请求。

需要浏览器和服务器同时支持。目前所有浏览器都支持该功能,整个cors通信过程不需要用户参与。

浏览器将cors请求分为两种:简单请求和非简单请求

只要同时满足以下两个条件,就属于简单请求:

(1) 请求方法是以下三种方法之一:

    HEAD
    GET
    POST

(2)HTTP的头信息不超出以下几种字段:

    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

否则属于非简单请求。

2.2.1 简单请求

浏览器在头信息中增加一个origin字段,用来说明本次请求来自哪个源(协议+域名+端口)。服务器根据这个值决定是否同意这次请求。

如果服务器没有返回access这样的头部信息,即服务器没支持的话,前端的console里会显示access to xmlHttpRequest ...has been blocked by CORS policy...

如果origin指定的域名在许可范围内,服务器返回的响应会多出几个头信息字段:

Access-Control-Allow-Origin: xxxx
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: xxx

Access-Control-Allow-Origin:

是必须的,值要么是请求时origin字段的值,要么是*表示接受任意域名的请求。

Access-Control-Allow-Credentials

可选,布尔值,表示是否允许发送cookie,不同源时请求中不会带cookie,设为true表示服务器许可cookie可以包含在请求中,
XMLHttpRequest.withCredentials属性是一个boolean类型,表示是否该使用cookie,authorization header(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制请求。

参考:
xmlHttpRequest.withCredentials

Access-Control-Expose-Headers

可选,cors请求时,xmlHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。

如果要带上cookie,后台的origin就不能设为*,且需要前端设置如下:

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
2.2.2 非简单请求

是对服务器有特殊请求的:如请求方法是put或delete,或者content-type字段的类型是application/json.

非简单请求会在正式通信之前,增加HTTP查询请求,称为预检请求。浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单中,以及可以使用那些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错。

预检请求

1)请求:

预检请求用的方法是option,表示这个请求时用来询问的。头信息里关键字段是origin表示请求来自哪个源。

2)回应:

服务器收到预检请求后,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应。

服务器返回的Access-Control-Max-Age
该字段可选,用来指定本次预检请求的有效期,单位为秒。上面结果中,有效期是20天(1728000秒),即允许缓存该条回应1728000秒(即20天),在此期间,不用发出另一条预检请求

一旦服务器通过了预检请求,以后每次浏览器正常的cors请求都和简单请求一样。

php跨域问题记录

标签:multi   chrome   cache   问控制   web服务   信息   mod   这一   关键字   

原文地址:https://www.cnblogs.com/efan/p/10397174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!