跨域处理

什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域.

---

---

前言

跨越处理三种方法:cors,nginx,jsonp

---

一、cors(后端处理跨越,也是最简单的一种跨越处理方法)

var allowCrossDomain = function (req, res, next) {
 res.setheader('Access-Control-Allow-Origin', '*');//允许请求的源头
 res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, DELETE');  //允许任何方法
 res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,X-Session-Token');   //允许任何类型
 next(); //下一步
};
// app.use(allowCrossDomain);//运用跨域的中间件

二、nginx(反向代理)

开启nginx

这样既可开启成功
处理一闪而过点击这

在nginx配置文件中配置允许跨越

 server {
		listen       8089;
		server_name  localhost;
		root   html;    #根目录
		# cors
		add_header Access-Control-Allow-Origin $http_origin always;  # '*' 
		add_header Access-Control-Allow-Credentials true;
		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
		add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization' always;
		location /api {
		    #http://localhost:8089/api替换http://localhost:3000/api
			proxy_pass http://localhost:3000/api;
		}
	}

三、jsonp

1.引入jquery

<script src="jquery-1.11.0.min.js"></script>

2.发送请求(回调函数传数据)

function getJsonp() {
            $.ajax({
              url: "http://localhost:3000/api/jsonp",
              data: {name: "xxxx"},
              dataType: "jsonp",
              jsonpCallback: "handleResponse"
            })
        };
        function handleResponse(data) {
            console.log(data);
        }

3.node设置

app.get("/api/jsonp", function(req, res){
    var data = {name: "jsonp数据"} //返回数据
    data = JSON.stringify(data); //转字符串
    //var callback = `handleResponse(${data})`;
    var callback = `${req.query.callback}(${data})`; //函数名+数据
    console.log(callback)
    res.send(callback);
})

由于jsonp是根据get请求url这样的拼接方式,所以jsonp只适用于跨越处理的get请求

总结

跨越处理三种方法:
cors(后端处理)
nginx(下载nginx反向代理)
jsonp(只适用于get请求)