前端开发中，三种情况下解决跨域的方法

在前端开发中，在接口调用时，经常会出现跨域的问题，但又不能操作后端，那么前端只能自己来解决。

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项目，这样配置文件才能生效。
关注微信公众号前端凌影，一起学习吧！