javascript 前端 webpack 4种方法解决js跨域的实现方式

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

一、JSONP

在页面上，js脚本，css样式文件，图片这三种资源是可以与页面本身不同源的。

jsonp就利用了script标签进行跨域取得数据。

JSONP允许用户传递一个callback参数给服务器端，然后服务器端返回数据时会将这个callback参数

作为函数名来包裹住JSON数据。这样客户端就可以随意定制自己的函数来自动处理返回的数据了。

JSONP只能解决get请求，不能解决post请求。

使用ajax实现跨域：

$.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, //是否跨域

},

},

},

好文链接

 您阅读本篇文章共花了： 

大家都在找：

javascript：javascript 菜鸟教程

前端：前端三大框架

webpack：webpack官网