Vue中的跨域解決方案
什麼是跨域
跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數據。源指協議,端口,域名。只要這個3箇中有一個不同就是跨域
1
2
3
4
5
6
|
# 協議跨域 http: //a.baidu.com訪問https://a.baidu.com; # 端口跨域 http: //a.baidu.com:8080訪問http://a.baidu.com:80; # 域名跨域 http: //a.baidu.com訪問http://b.baidu.com; |
解決方案
第一種,服務端(後端)更改header
1
2
|
res.header( "Access-Control-Allow-Origin" , "*" ); // 允許的域名 res.header( "Access-Control-Allow-Methods" , "PUT,POST,GET,DELETE,OPTIONS" ); // 允許的請求方法 |
第二種:代理
原因就是因爲客戶端請求服務端的數據是存在跨域問題的,而服務器和服務器之間可以相互請求數據,是沒有跨域的概念(如果服務器沒有設置禁止跨域的權限問題),也就是說,可以配置一個代理的服務器可以請求另一個服務器中的數據,然後把請求出來的數據返回到代理服務器中,代理服務器再返回數據給客戶端,這樣就可以實現跨域訪問數據。
打開config/index.js,在proxyTable中添寫如下代碼:
1
2
3
4
5
6
|
proxyTable: { '/mall' : { target: 'http://www.abcd.com' , changeOrigin: true } }, |
使用:
1
2
3
4
5
6
7
8
|
// 商品列表 list (listParams) { return _http.request({ type: 'post' , url: '/mall/product/list.do' , data: listParams }) } |
就可以正常發送ajax或者是axios請求了
第三種:jquery jsonp
1
2
3
4
5
6
7
8
9
|
$.ajax({ url: '地址' , type: 'GET' , dataType: 'JSONP' , success: function (res) { self.data = res.data.slice(0, 3) self.opencode = res.data[0].opencode.split( ',' ) } }) |