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

4种方法解决js跨域的实现方式相关推荐

firefox如何载入json文件_如何去解决JS跨域问题怎么能学好Web前端开发
如何去解决JS跨域问题?怎么能学好Web前端开发?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
jsonp-反向代理-CORS解决JS跨域问题的个人总结
jsonp-反向代理-CORS解决JS跨域问题的个人总结网上说了很多很多,但是看完之后还是很混乱,所以我自己重新总结一下. 解决 js 跨域问题一共有8种方法, jsonp(只支持 get) 反向代 ...
解决js跨域调用WebApi的问题
解决js跨域调用WebApi的问题参考文章: (1)解决js跨域调用WebApi的问题 (2)https://www.cnblogs.com/qubernet/p/6396295.html 备忘一下 ...
解决js跨域使用nginx配置问题
解决js跨域使用nginx配置问题参考文章: (1)解决js跨域使用nginx配置问题 (2)https://www.cnblogs.com/phpzhou/p/11132674.html 备忘一下 ...
前端用nginx解决js跨域问题
前言公司的一个项目,页面需要给第三方接口发送一个请求,获取第三方接口生成的一个二维码图片,结果 js 跨域获取资源报错:" No 'Access-Control-Allow-Origin' ...
三种方法实现ajax跨域
在工作中经常会遇到ajax的跨域请求,会出现禁止访问的安全限制.所以就整理了一下ajax的跨域的方法. 比如说你的网站域名是aaa.com,想要通过AJAX请求bbb.com域名中的内容,浏览器就会认 ...
使用windows.name解决js跨域数据通信
下面是参考文献[1]的一个实践验证,测试环境略有修改,记录如下: 测试场景:从网站A中的网页去获取网站B中网页的数据下面以news.sina.com.cn和news.163.com这两个站点为例,将 ...
PHP后端API接口解决Ajax跨域请求的方式
如果我们是前后端分离,且不再同一域的情况下,前端使用Ajax请求后端的数据的时候,就会出现跨域的问题. 在前端我们可以使用获取jsonp格式来应对跨域问题,但是这种方式比较难用,如果前端后端都是可以进 ...
使用fetch轻松解决JS跨域请求问题——无需CORS,jsonp
fetch(url, { method: "POST", mode: "no-cors", headers: { "C ...
什么是ajax跨域问题,如何解决ajax跨域问题
<如何解决ajax跨域问题>由会员分享,可在线阅读,更多相关<如何解决ajax跨域问题(5页珍藏版)>请在人人文库网上搜索. 1.如何解决ajax跨域问题由于此前很少写前端的 ...

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

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

一、JSONP

二、CORS跨域资源共享

三、Nginx反向代理

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

4种方法解决js跨域的实现方式相关推荐

最新文章

热门文章

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

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

一、JSONP

二、CORS跨域资源共享

三、Nginx反向代理

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

4种方法解决js跨域的实现方式相关推荐

最新文章

热门文章

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