1.跨域

跨域问题：只有在前端的ajax和后台交互的过程中才会存在

当我们使用ajax从一个url向另外一个url发送请求的时候，只要两个url的协议、域名、端口号有任何一个不一样，就构成跨域

1.1 JSONP

1.1.1 JSONP介绍
JSONP：是使用script标签向服务器发送请求的一种方式，然后在服务器中客户端返回了一段js脚本，客户端接收到这个js脚本之后就会执行该脚本了。

在使用JSONP来解决跨域请求问题的时候，需要服务端的配合。
JSONP只能够发送GET请求。
JSONP和AJAX有关系吗? 没有任何关系

//通过script标签是可以发送请求

1
2
3
var script = document.createElement('script')
  script.src = 'http://localhost:8888/test'
  document.body.appendChild(script)
//获取script标签请求的结果:在服务器返回一段js脚本，客户端接收到js脚本之后会立刻执行该脚本
function test(msg){
    console.log(msg)
}

1
2
3
4
5
6
7
8
app.get("/test",(req,res)=>{
    res.header("content-type","application/javascript")
    var person = {
        name:"kk",
        age:"19"
    }
    res.send(`test(${JSON.stringify(person)})`)
})

1.1.2 ajax中jsonp的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
ajax的dataType可以指定怎么处理服务器响应给客户端的数据

text/xml  ： 对服务器的相应结果不做任何处理
html  ： 服务器给客户端响应了一个页面代码，页面代码中script会在代码拼接到dom执行
json : 会调用JSON.parse()来解析服务器的响应结果
script : 服务器给客户端响应了js脚本，客户端接收到js脚本之后立马执行
jsonp ：客户端给服务器发送jsonp请求，服务器返回了一段js脚本

$.ajax({
        type:"get",
        url:"http://localhost:8888/test2",
        dataType:"jsonp",
        //指定回调函数的key
        // jsonp:"callback",
        //指定回调函数的名字
        // jsonpCallback:"kk",
        success:function(msg){
            console.log(msg);
        }
    })


app.get("/test2",(req,res)=>{
    //声明服务器发送给客户端的数据类型是javascript脚本
    res.header("content-type","application/javascript")
    //获取到客户端传递给服务器的回调函数的名字
    var functionName = req.query.callback;
    //服务器传递给客户端的数据
    var person = {
        name:"ppp",
        age:"19"
    }
    //给客户端发送一段js脚本
    res.send(`typeof(${functionName}) == 'function' && ${functionName}(${JSON.stringify(person)})`)
})

1.2 CORS

1
2
3
4
5
6
7
8
9
Cross Origin Resource Share，跨域资源共享。不需要客户端做额外的处理，只要服务添加下面代码即可。
//服务端代码 
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header('Access-Control-Allow-Headers', 'Content-type');
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS,PATCH");
    res.header('Access-Control-Max-Age',6000);//预请求缓存10分钟
    next();  
});

1.3.配置devserver的proxy

在前端的工程化项目(webpack)中,我们可以通过配置devserver的proxy来解决跨域访问的问题。他的原理是在本地开启一个服务器向数据服务器发送请求，因为服务器和服务器之间是没有跨域

1.4.反向代理（ngix）

但是因为webpack的devserver只在开发环境下有效，当项目发布上线之后仍然会有跨域问题，为了解决项目上线的跨域问题，我们配置服务器的反向代理（ngix）

1.5.打包成apk

除此之外，我还知道当项目打包成apk之后就不存在跨域问题了，所以如果项目要打包成apk，我们需要在项目中的所有请求中写全路径(此时我们可以配置axios.default.baseURL来解决)