在前端开发中,在接口调用时,经常会出现跨域的问题,但又不能操作后端,那么前端只能自己来解决。
1.原生js解决跨域的办法是``
<script type="text/javascript">
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '接口的域名?(自己的接口需要的参数)&callback=handcallback';
//这里在向服务端发送请求时,同时上传了一个回调函数即callback=handcallback
document.head.appendChild(script);
function handcallback(res){
console.log(JSON.stringify(res));
//利用json转义获得数据
}
<</script>
简单来说,就是在传参时,将自己的回调函数也传上去
2.第二种情况是在使用jq封装的$.ajax()方法时,遇到跨域的情况
$.ajax({
type:'get',
url:请求的域名,
data:{
"key":请求时需要携带的参数,
},
crossDomain: true, //浏览器允许跨域
dataType: 'jsonp', // 请求方式为jsonp******解决跨域
jsonpCallback: "success", // 自定义回调函数名
success(res){
console.log(res);
}
})
3.在使用vue.js时遇到跨域的解决办法
这里需要大家注意的是,vue-cli的版本不同,因此搭建出来的工程也是有所差异,版本较低的脚手架文件中会有config.js这个文件,要解决跨域,大家只要找到这个文件夹复制如下代码便可以解决。
如果是较高版本的vue-cli,所搭建的工程中不会有config.js这个配置文件,那么就需要自己在根目录自己来进行新建vue.config.js文件,自己进行配置,具体配置如下:
module.exports = {
publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
outputDir: "mycli3",
assetsDir: "assets",
filenameHashing: false,
lintOnSave: true,
productionSourceMap: false,
devServer: {
host: "localhost",
port: 8080, // 本地的端口号
https: false, // https:{type:Boolean}
open: true, //配置自动启动浏览器
proxy: {
"/api": {
target: "访问的接口域名",// 要访问的接口域名
ws: true,// 是否启用websockets
changeOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,这样服务端和服务端进行数据的交互就不会有跨域问题
pathRewrite: {
'^/api': '' //这里理解成用'/api'代替target里面的地址,比如我要调用'http://40.00.100.100:3002/user/add',直接写'/api/user/add'即可
}
}
}
}
};
在配置完之后,大家一定还要注意重启vue项目,这样配置文件才能生效。
关注微信公众号前端凌影,一起学习吧!