跨域（cors）
跨域的原理，就是受同源策略（域名，协议，端口）的影响，本域的js不能操作其它域的页面对象。
跨域资源共享（cors)
1、概述
当一个资源请求一个其他域名或者端口的资源时，会产生跨域http请求。
浏览器会限制脚本发起跨域请求，这是对网站资源的保护。
所以我们需要跨域资源共享规范。即cors（Cross-origin resource sharing）
2、两种请求
跨域将请求分为两种：简单请求 + 非简单请求
2.1 简单请求
简单请求处理：浏览器直接发出跨域共享请求–》在头信息中，增加origin字段，说明请求来源
请求字段：
origin：
说明请求来源
服务器返回字段：
Access-Control-Allow-Origin：
值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求
Access-Control-Allow-Credentials：
是否允许发送Cookie，true or false
Access-Control-Expose-Headers：
允许访问的服务器的头信息的白名单
2.2 非简单请求
非简单请求处理：浏览器先发出预检请求，预检请求带OPTIONS，表达这个请求是询问的。
预检请求字段：
Access-Control-Request-Method：
列出浏览器的CORS请求会用到哪些HTTP方法，
Access-Control-Request-Headers：
列出浏览器CORS请求会额外发送的头信息字段，
服务器返回字段：
Access-Control-Allow-Methods：
表示服务器支持的所有跨域请求的方法
Access-Control-Allow-Headers：
表示服务器支持的所有头信息字段
Access-Control-Max-Age：
指定本次预检请求的有效期，单位为秒，在此期间，不用发出另一条预检请求
预检请求通过，则会继续发出和简单请求一样的http请求。
预检请求未通过，请求失败
2.3 带凭证信息的请求
在简单请求中，有是否发送HTTP Cookies和验证信息功能。
请求字段：
withCredentials：ture
允许凭证信息一起发送
服务器返回字段：
Access-Control-Allow-Credentials: true
**特别注意
Access-Control-Allow-Origin
不能为*，需要设置为该请求网页一致的域名。
跨域的原理，就是受同源策略（域名，协议，端口）的影响，本域的js不能操作其它域的页面对象，然后我们就要解决这个问题。
解决跨域方法之 服务器代理跨域 NODEJS跨域
服务器不受同源策略影响
1.创建express应用程序
var express = require('express');
var app = express();
2.设置跨域访问相应标头
通过all方法设置所有请求都需要的头信息
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
}
3.发送请求
采取nodejs request模拟浏览器发起请求
app.all('*', function(req, res, next) {
option = {
url: 'http://KKKK' + req.originalUrl,
method: req.method,
json: true,
body: req.body,
headers: {
"content-type": "application/json"
}
};
request(option, function(error, response, body) {
if (!error && response.statusCode == 200) {
res.send(body);
}
}
}
4.监听8081端口，将8081端口的请求发送到 http://KKKK
app.listen(8081);
解决跨域方法之 JSONP 学习
1.概述
json：轻量级的数据交换格式
jsonp：一种使用JSON数据的方式
2.JSONP 原理
HTTP请求虽然受跨域限制，但是Web页面上调用js文件时则不受是否跨域的影响，而且拥有”src”这个属性的标签都拥有跨域的能力。比如 <’script’>、<’img’>、<’iframe’>
于是乎？
如果要进行跨域请求，通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码
即在跨域的服务端生成JSON数据，然后包装成script脚本回传，就突破同源策略的限制，实现跨域！
动态创建一个script标签，设置src，将script作为参数返回调用。
客户端代码：
script type="text/javascript"
$.ajax({
url:"http://crossdomain.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
},
timeout:3000
});
/script
var a = 1; console.log(a++); console.log(++a);
解决跨域方法之 nginx 实现跨域
1、概述
nginx 类似于tomcat，可以进行HTTP服务处理，主要作为反向代理服务器使用，Wordpress、GitHub等知名的网站都使用到了Nginx。在这里我们使用nginx作为正向代理。
2、反向代理 VS 正向代理
正向代理：架设在客户机与目标主机之间，客户机必须指定代理服务器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。 反向代理：设在服务器端，此时代理服务器与目标主机一起对外表现为一个服务器。 正向代理代理的对象是客户端，反向代理代理的对象是服务端。
3、使用
安装nginx，修改配置文件
进入nginx目录，cd /usr/local/etc/nginx/
进入conf文件，sudo vim /usr/local/etc/nginx/nginx.conf 修改文件如下
server {
listen 9999;
server_name localhost;
location /autho-dev/ {
add_header 'Access-Control-Allow-Origin' 'http://localhost:8080' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With' always;
if ($request_method = OPTIONS ) {
return 200;
}
# proxy_pass http://autho.chiq-cloud.com;
proxy_pass http://10.4.32.70:8080;
}
}
然后重启nginx
sido nginx -s reload
4、nginx命令：
启动nginx：sido nginx
关闭nginx：查找当前nginx进程号，然后输入命令：kill -HUP 进程号