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

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”