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

一、通过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请求使用。

 

 

二、解决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”

posted @ 2021-08-10 15:08  孤独的洋葱头  阅读(1839)  评论(0)    收藏  举报