前端解决跨域请求

跨域产生的原因：同源策略
同源政策：两个页面拥有相同的协议、端口、域名就是同源，其中一个不同就是不同源，目的是保护用户的信息安全，防止其他网站盗取信息。

解决方案：

• jsonp
  原理： 1.动态创建一个script标签
  2.通过srcipt标签里的src属性 进行 跨域访问 属性里面写 跨域的地址+ callback属性作为函数传递给后端
  3.服务端通过接收客户端传过来的callback属性值对应的函数名
  4.要发生过去的数据 通过函数的参数传递过去 (JSON格式)
  5.将函数名对应调用的执行代码返回给客户端(服务器端响应数据一定是函数代码的调用，当浏览器对script将响应内容加载完成后，会自动调用函数)
  6.并且在服务器端的执行函数是字符串，字符串包裹着函数调用的代码，如果没有包裹，则就在服务端立即执行。
  缺点： 只能发送get请求
  客户端代码

// 1.封装一个jsonp函数;
jsonp({
    // method: 'GET',// 所有的jsonp请求都是get请求，所以这个属性可以不写了
    // data: , // 写了以后太繁琐，取消
    url: 'http://www.localhost:3006/api/jsonp',
    success: function (res) {
        console.log(res)
    }
})
 
// 封装
function jsonp(obj) {
    // 1.创建一个script标签;   2.改变src    3.给函数起名字，定义为全局函数；
    var script = document.createElement("script"); // 不要用innerHTML, 他不会自动发送请求
    // 3.给函数起名字，定义为全局函数；
    var fnName = "haha_123123";
    // window.aaa就是把aaa设置为全局变量！
    window[fnName] = obj.success;
    // 2.改变src,添加到head中
    script.src = obj.url + "?callback=" + fnName;
    // 把script标签添加到head标签中，就会发送src的请求了
    document.head.appendChild(script);
    // 代码执行完毕，把script标签删除
    script.onload = function () {
        document.head.removeChild(script);
        window[fnName] = undefined;
    }
}
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

服务端代码

app.get("/api/jsonp", (req, res) => {
    // 获取函数名,设置对象,发送给客户端
    const fnName = req.query.callback;
    // 定义发送给客户端的对象转换为json字符串
    var objStr = JSON.stringify({
        name: '张三',
        age: 18
    });
    // 字符串类型的执行函数
    res.send(`${fnName}(${objStr})`);
});
1
2
3
4
5
6
7
8
9
10
11

• CORS (CROSS-Origin Resource Sharing 跨域资源共享)
  原理：服务器设置，同源政策默认阻止跨域获取资源，但是CORS给了web服务器权限，即服务器可以选择，允许访问他们的资源。设置三个响应头

1.Access-Control-Allow-Origin 字段 （指定了哪些域名或ip地址可以跨域 也可以写* 代表允许所有地址）

res.setHeater('Access-Control-Allow-Origin',' http://XXX.cn || * ||  ip地址  ');
1

2.CORS默认支持9个请求头，如果在9个请求头之外 要单独设置，多个请求头之间要用英文逗号隔开。

res.setHeater('Access-Control-Allow-Headers','Content-Type,X-Custom-Header');
1

3.默认情况下CORS仅支持客户端发起的GET、POST、HEAD请求，如果希望客户端发送PUT、DELETE请求需要在服务器端设置

res.setHeater('Access-Control-Allow-Method','GET');
1

• webpack代理
  通过服务器代理去发ajax 这个代理是webpack提供给我们的 因为服务器只是对ajax的同源限制，并不会限制服务器之间的通信

//vue.config.js
devServer: {
    proxy: {
      // 如果请求地址以/api打头,就出触发代理机制
      // http://localhost:8080/api/login -> http://localhost:3000/api/login
      '/api': {
        target: 'http://localhost:3000' // 我们要代理的真实接口地址
      }
    }
  },
1
2
3
4
5
6
7
8
9
10