一、什么是跨域？

跨域問題的出現(xiàn)是因為瀏覽器的同源策略問題。所謂同源就是必須有以下三個相同點：協(xié)議相同、主機相同、端口相同。如果其中有一項不同，即出現(xiàn)非同源請求，就會產(chǎn)生跨域。當我們請求一個接口的時候，出現(xiàn)如：Access-Control-Allow-Origin 字眼的時候說明請求跨域了

二、如何解決跨域？

跨域的解決方案：

jsonp
cors
Node中間件代理(兩次跨域) 即 Proxy
nginx反向代理 CORS支持所有類型的HTTP請求，是跨域HTTP請求的根本解決方案
JSONP只支持GET請求，JSONP的優(yōu)勢在于支持老式瀏覽器，以及可以向不支持CORS的網(wǎng)站請求數(shù)據(jù)。
不管是Node中間件代理還是nginx反向代理，主要是通過同源策略對服務(wù)器不加限制。
日常工作中，用得比較多的跨域方案是cors和nginx反向代理

主要解釋CROS和Proxy兩種方式

1、CROS

• CROS是 Cross-Origin Resource Sharing的縮寫，翻譯過來就是跨域資源共享的意思。它由一系列傳輸?shù)腍TTP頭組成，這些HTTP頭會決定瀏覽器是否阻止前端 JavaScript代碼獲取跨域請求的響應(yīng)。
• CORS的實現(xiàn)比較簡單方便，只需要增加一些 HTTP頭，讓服務(wù)器能聲明允許的訪問來源。只要后端實現(xiàn)了 CROS就實現(xiàn)了跨域。

2、Proxy（代理）

• 通過啟動本地服務(wù)器進行代理轉(zhuǎn)發(fā)目標服務(wù)器。而跨域只針對于瀏覽器，對于node服務(wù)發(fā)出的請求是不會出來跨域的，從而解決了跨域的問題。
• 在vue.config.js文件

1、可配置多個不同的proxy

devServer: {
    proxy: {
      '/api': {//代理標識，一般是每個接口前的相同部分
        target: 'http://23.15.11.15:8000', // 這里寫的是訪問接口的域名和端口號
        changeOrigin: true, // 允許跨域請求
        pathRewrite: { // 重寫路徑，替換請求地址中的指定路徑
          '^/api': '/user'
        }
      },
      '/login': {
		 target: 'http://23.15.11.15:8000',
		 changeOrigin: true,
		 pathRewrite:{
		   '^/login':''  //替換成空
		 }
	   }
    }
  },

示例：

• http://localhost:8080/api/test --> http://23.15.11.15:8000/user/test
• http://localhost:8080/login/index–> http://23.15.11.15:8000/index

2、對所有的接口都代理

devServer: {
 proxy: 'http:/www.ljc.com'
}

示例：

• http://localhost:8080/api/test --> http://www.ljc.com/api/test
• http://localhost:8080/login/index–> http://www.ljc.com/login/index

總結(jié)

到此這篇關(guān)于vue項目中常用解決跨域的文章就介紹到這了,更多相關(guān)vue解決跨域方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論