面試題之vue跨域

Vue中的跨域解決方案
什麼是跨域
跨域指瀏覽器不允許當前頁面的所在的源去請求另一個源的數據。源指協議,端口,域名。只要這個3箇中有一個不同就是跨域
 

[JavaScript] 純文本查看 複製代碼
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

[JavaScript] 純文本查看 複製代碼
1
2
res.header("Access-Control-Allow-Origin", "*"); // 允許的域名
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS"); // 允許的請求方法


第二種:代理
原因就是因爲客戶端請求服務端的數據是存在跨域問題的,而服務器和服務器之間可以相互請求數據,是沒有跨域的概念(如果服務器沒有設置禁止跨域的權限問題),也就是說,可以配置一個代理的服務器可以請求另一個服務器中的數據,然後把請求出來的數據返回到代理服務器中,代理服務器再返回數據給客戶端,這樣就可以實現跨域訪問數據。

打開config/index.js,在proxyTable中添寫如下代碼:

[JavaScript] 純文本查看 複製代碼
1
2
3
4
5
6
proxyTable: {
      '/mall': {
        target: 'http://www.abcd.com',
        changeOrigin: true
      }
    },


使用:

[JavaScript] 純文本查看 複製代碼
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

[JavaScript] 純文本查看 複製代碼
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(',')
      }
    })
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章