前端解決跨域的方法有哪些？

1、經過jsonp的方式跨域

　　一般爲了減輕web服務器的荷載，咱們把js、css、img等靜態資源分離放到一臺獨立域名的服務器上，在html頁面中再經過相應的標籤從不一樣域名下加載靜態資源而被瀏覽器容許，基於此原理，咱們可已經過動態建立script再請求一個帶參網址實現跨域通訊。

 1 jquery：ajax
 2 
 3 $.ajax({
 4 
 5 url:"",
 6 
 7 type:"",
 8 
 9 dataType:"jsonp",請求方式爲jsonp
10 
11 jsonCallback:"handlecallback",
12 
13 data:{}});

1 vue.js
2 this.$http.jsonp("url",{
3    params:{},
4 jsonp:"handlecallback", 
5 }).then((res)=>{
6 console.log(res);
7 })

這種方式的缺點是隻能get請求使用。

 

 

2、解決vue-cli項目中的跨域問題

開發環境中的跨域

使用vue-cli建立的項目，開發地質是localhost：8080，須要訪問非本機上的接口http：//10.1.0.34:8000，不一樣域名之間的訪問須要跨域才能正確請求。

方法不少一般須要後端配合，不過vue-cli建立的項目能夠直接利用node.js代理服務器經過修改vueproxyTable接口實現跨域或請求。

在vue-cli項目中，config文件夾下的index.js配置文件中修改前的dev

1 dev：{
2 env:require("./dev.env"),
3 port:8080,
4 autoOpenBrowser:true,
5 assetsSubDirectory:"static",
6 assetsPubilcPath:"/",
7 proxyTable:{},
8 cssSourceMap:false
9 }

只修改其中的proxyTable:{}項

 1 dev：{
 2  env:require("./dev.env"),
 3  port:8080,
 4  autoOpenBrowser:true,
 5  assetsSubDirectory:"static",
 6  assetsPubilcPath:"/",
 7 //代理配置表在這裏能夠配置特定的請求代理到對應的api接口
 8  proxyTable:{
 9     "/api":{
10 target:"http://XXXXXX.com",//接口域名
11 //secure:false, 若是是https就要加上這個
12 changeOrigin:true,
13 //若是接口跨域就須要進行這個參數配置，爲true的話請求的header將會設置爲匹配目標服務器的規則
14 parhRewrite:{"^/api":""}
15 //自己的接口沒有「/api」這種通用前綴，因此要rewrite若是有就去掉
16 
17 }
18  },
19  cssSourceMap:false
20  }

如：原接口爲："/index"

如今："/api/index」