为什么会跨域？

受同源策略的限制，浏览器只允许请求同协议、域名、端口下的数据，如果上面三个有一个不一样就会出现跨域的情况，跨域请求的时候，服务器已经收到的请求，只是浏览器不愿意给你，可以通过下面两种方式实现跨域。

CORE跨域(跨域资源共享)

启动两台服务器

    const express = require('express');
    //CORS的方式跨域
    var app = express();
    app.get('/', (req, res)=>{            
            res.send("你好");
    });
    app.listen(5000);

    var app2 = express();
    app2.use(express.static(__dirname));
    app2.listen(5001);

2、app2服务器默认打开index.html页面

    <!DOCTYPE html>
    <html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
    </head>
    <body>
            <h1>Hello</h1>
            <script>
		fetch('http://localhost:5000')
		.then((response)=>response.text())
		.then(data=>console.log(data))
            </script>
    </body>
    </html>

当在页面通过fetch请求5000的时候，会出现跨域的报错

这时候我们只需要根据报错的提示，在后台代码中设置一下header就可以了

app.get('/', (req, res)=>{
    res.header("Access-Control-Allow-Origin", "http://localhost:5001");
    res.send("你好");
});

Access-Control-Allow-Origin的值也可以配置成 * ，表示可以允许所有域名的请求

jsonp的跨域方式

jsonp的方式只能让响应get的请求方式，也是需要后台配合。是利用了script标签请求外部数据不受同源策略限制的原理，往页面里插入script标签。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
    <h1>Hello</h1>

    <script>
        function fun(data){
            console.log(data);
        }
    </script>
    <script src="http://localhost:5000?callback=fun"></script>
</body>
</html>

前台先要注册fun函数，然后运行下面的script脚本，后台解析到请求的callback参数，然后通过后台代码拼接起来返回信息，callback参数对应的内容作为一个方法返回到页面，然后页面执行返回的函数

app.get('/', (req, res) => {
    //获取到callback参数
    var funName = req.query.callback;
    console.log(req.query);
    //返回方法名
    res.send(funName+"('你好')");
    //fun('你好');
});

CORE和JSONP跨域的方式

CORE跨域(跨域资源共享)

jsonp的跨域方式