4种方法解决js跨域的实现方式

4种方法解决js跨域的实现方式

一、JSONP

在页面上，js脚本，css样式文件，图片这三种资源是可以与页面本身不同源的。
jsonp就利用了script标签进行跨域取得数据。
JSONP允许用户传递一个callback参数给服务器端，然后服务器端返回数据时会将这个callback参数
作为函数名来包裹住JSON数据。这样客户端就可以随意定制自己的函数来自动处理返回的数据了。
JSONP只能解决get请求，不能解决post请求。

<script>
   function callback(data){
       console.log(data);
   }
</script>
<script src="http://localhost:80/?callback=callback"></script>

使用ajax实现跨域：

<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
  $.ajax({
    url:'http://localhost:80/?callback=callback',
     method:'get',
     dataType:'jsonp', //=> 执行jsonp请求
     success:(res) => {
         console.log(res);
     }
 })

 function callback(data){
     console.log(data);
 }

二、CORS跨域资源共享

浏览器会自动进行CORS通信，实现CORS通信的关键是后端。服务端设置Access-Control-Allow-
Origin就可以开启CORS。该属性表示哪些域名跨域访问资源。
主要设置以下几个属性：
	Access-Control-Allow-Origin//允许跨域的域名
	Access-Control-Allow-Headers//允许的header类型
	Access-Control-Allow-Methods//跨域允许的请求方式

三、Nginx反向代理

通过nginx配置一个代理服务器将客户机请求转发给内部网络上的目标服务器；
并将服务器上返回的结果返回给客户端。

四、webpack （在vue.config.js文件中）中 配置webpack-dev-server

devServer: {
  proxy: {
    '/api': {
      target: "http://39.98.123.211",
      changeOrigin: true,  //是否跨域
    },
  },
},