关于跨域的处理的几种方法的整理

Posted 2020-07-04 夜皇帝

跨域是经常遇到的这里不再说跨域什么意思了，协议不同，端口不同，域名不同是为跨域；

解决方法：

1，后台设置代理，比如把上海有个服务器，我北京相用，可以北京后台代理，

2，前端采取jsop来获取数据

代码示例：此处后台是node.js简单实现，页面端口localhost：3020

前端：
$(function(){
    $("#btn").click(function(){
        $.ajax({
            method:"get",
            url:"http://127.0.0.1:3022/app/jsonp",//这里服务端端口是3022，跨域
            dataType:"jsonp",//数据类型是jsonp
            jsonp:"callback",//参数为callback
            success:function(data){
                console.log(data.name)
            }

        })
    })
})
后端node.js

var express=require("express");
var app=express();
app.use(express.static("./"));
app.get(‘/app/jsonp‘,function(req,res,next){
    res.jsonp({name:‘lyz‘});//注意此处格式必须是jsonp，各个语言可能写法不同
});

app.listen(3022,function(req,res){

 console.log(2)
 })
原理分析：人们加载任意地址的js文件都有效果，于是人类利用聪明的大脑想到把数据放到js里面，然后让前端调取，jsonp只对get有效，post无效的；

3 xhr2
这是html5新产生的ajax2，衍生出来的，于是在一些浏览器上是无效的；
这方法就是直接在服务端设置，本方法可以post，get都行
header(‘Access-control-Allow-Origin:*‘）

前台代码

$.ajax({
    method:"get",
    url:"http://127.0.0.1:3022/app/jsonp",
    success:function(data){
        console.log(data)
    }

})

后台代码

var express=require("express");
var app=express();
app.use(express.static("./"));
app.get(‘/app/jsonp‘,function(req,res,next){
res.setHeader(‘Access-control-Allow-Origin‘,‘*‘);注意这里*号是所有域名都可以访问，即通配原则，如果要某特定域名访问，可单独设置
res.send("2")
});

app.listen(3022,function(req,res){

console.log(2)
})