跨域问题和origin

接口所在的网站和我的网站不是一个站点，浏览器只允许请求当前域的资源，而对其他域的资源表示不信任

怎么才算跨域呢？

1. 请求协议http,https的不同
2. 域domain的不同
3. 端口port的不同

三者任一不同，都是跨域

解决方式：
4. 修改响应头
5. jsonp

修改响应头方式：

在此之前，需要知道简单请求、复杂请求
简单请求：
1): 请求方式只能是：head，get，post
2): 请求头允许的字段：Accept，Accept-Language，Content-Language，Last-Event-ID
Content-Type：application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一
2.复杂请求：剩下的请求方式

简单请求:

浏览器：诶，你这个请求要跨域是吧，我得问问服务器大哥肯不肯！往请求头添加origin亮一下牌面，请求头origin字段的值为当前域

服务器：诶，你是谁，我来看看你的origin，嗯嗯，可以，符合我的要求，放行！

Access-Control-Allow-Origin，标识允许哪个域的跨域请求，如果服务器不通过，响应头里就没有这个字段，接着触发XHR的onerror，再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'

上面第一行说到的Access-Control-Allow-Origin有多种设置方法：

设置是最简单粗暴的，但是服务器出于安全考虑，肯定不会这么干，而且，如果是的话，游览器将不会发送cookies，即使你的XHR设置了withCredentials
指定域，如上图中的http://172.20.0.206，一般的系统中间都有一个nginx，所以推荐这种
动态设置为请求域，多人协作时，多个前端对接一个后台，这样很方便
withCredentials：表示XHR是否接收cookies和发送cookies，也就是说如果该值是false，响应头的Set-Cookie，浏览器也不会理，并且即使有目标站点的cookies，浏览器也不会发送。

复杂请求:

最常见的情况，当我们使用put和delete请求时，浏览器会先发送option（预检）请求，不过有时候，你会发现并没有，这是后面我们会讲到缓存。

预检请求
与简单请求不同的是，option请求多了2个字段：
Access-Control-Request-Method：该次请求的请求方式
Access-Control-Request-Headers：该次请求的自定义请求头字段

服务器检查通过后，做出响应：

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
//预检结果缓存时间,也就是上面说到的缓存啦
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允许的请求头字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

这里有个注意点：Access-Control-Request-Method，Access-Control-Request-Headers返回的是满足服务器要求的所有请求方式，请求头，不限于该次请求

我的项目中就是这样的写法，这样对不管是简单请求还是复杂请求都行

我用修改响应头的方式双端都配置了跨域但是不行

为什么用后端的方式可以解决？
跨域这个情况只会出现在浏览器页面里，因为实际上是浏览器由于安全原因限制了这些请求的访问