解决跨域问题

何为跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。因为浏览器的同源策略而导致了跨域。

解决方法

1.JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。

核心思想：网页通过添加一个<script>元素，向服务器请求 JSON 数据，服务器收到请求后，将数据放在一个指定名字的回调函数的参数位置传回来。

（1）原生实现：

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

（2） jQuery ajax：

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

（3）Vue.js：

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

2.cors

后台安装：

cnpm i cors --save

前台安装：

cnpm i axios --save

node后台配置

//app.js
var cors = require(cors);

app.use(cors());

测试：
后端(端口号3000):

//routes/inedx.js
router.get('/',function(req,res,next){
	res.json({
		ok:1
	})
})

前端(端口号 8080)：

//App.vue
export default {
	created(){
		this.$axios.get("http://localhost:3000").then(res=>{
			console.log(res.data)
		})
	}
}

浏览器输入localhost：8080，控制台打印 {ok:1}