跨域

实现跨域

页面中有几个可以允许跨域资源请求的标签，分别为a链接的herf、img的src、link的src跟script中的src

1. 浏览器的同源限制。同源要域名、协议、端口都相同，如果是协议跟端口照成的不同源，前端是无法解决的
2. 跨域并不是请求发不出去，请求可以发出去吗，服务器端能够接受到请求并返回数据，只是返回回来的时候被浏览器拦截了
3. 所有的跨域必须要经过信息提供方的允许，如果未经允许被激活是浏览器的同源策略出现了问题

实现跨域的方式

服务端对响应头经行设置

在node中的的设置如下

app.all('*',function(req,res,next){
 res.header('Access-Control-Allow-Origin','*');
 next();
});

通过jsonp的方式

jsonp的实现原理如下

​ 利用了script标签的天然跨域特性，在发送请求的时候传递了一个函数给后台，后台最后以参数调用的方式返回数据，前端在另外的script标签内创建相同的函数，来接收后台返回过来的参数

​ jsonp实现跨域请求和Ajax请求的本质不一样，jsonp是通过script来发送跨域请求的请求方式是GET请求，但是Ajax是通过XMLHttpRequest实现请求的，并可以设置请求的方式

原生的请求过程

​ 须要手动创建script标签，然后设置src属性，拼接地址和一个callback（函数名称）。发起请求后，通过在另外一个script标签中设声明一个函数，名称与请求的函数名称相同，然后以形参来接收后端传过来的数据

思考误区: 既然script标签能够解决跨域问题获取数据，那么为什么后端不能直接给前端返回数据，而是一个所谓的调用？

​ script标签确实能够解决跨域并且获取数据，但是在前端并没有办法接收返回的数据。如果返回的是一个调用，那么只需要在另外一对script标签中，声明一个同名的函数体进行接收就可以了，后续的处理也是在函数内部经行的，也就是整个过程没有异步对象参与。

json_web.html

<script>
    function callback (data) {
        console.log(data)
    }
</script>

<script src="http://127.0.0.1:8877/jsonp?cb=callback1"></script>
    // jsonp就是前端利用src不存在同源限制 向服务器发送请求 服务器返回是一个函数的调用 同时传递一个参数

jsonp_server.js

const express = require('express')
const app = express()
app.get('/jsonp', (req, res) => {
    // 获取前端传递过来的回调函数名字
    var fn = req.query.cb
    // jsonp接口返回的是一个函数的调用
    var obj = {name: 'zhangsan', age: 18}
    // res.send(`callback(99999)`)
    res.send(`${fn}(${JSON.stringify(obj)})`)
})
app.listen(8877, () =>{
    console.log(`http://127.0.0.1:8877 启动了`)
})

jsonp为什么只能发送get请求

​ 因为发起请求的方式是script标签，而不是异步对象，所以选择不了请求方式，标签默认就是get请求

Ajax中的jsonp

通过cors的方式

cors的中文意思是跨域资源共享，须要在服务器端经行cors配置

• cors发送的是正真的Ajax请求
• cors支持Ajax跨域，如果要启用CORS跨域资源共享，关键在于服务器，只要服务器支持CORS跨域资源共享，则浏览器肯定能够正常访问这种CORS接口；而且用户在发送Ajax的时候，就向发送普通Ajax一样
• 对node来说，如果想要开启CORS跨域通信，只需要安装cors模块即可