ajax请求前端跨域问题原因及解决方案


Posted in Javascript onOctober 16, 2021

一、跨域是怎么形成的

当我们请求一个url的 协议、域名、端口三者之间任意一个与当前页面url的协议、域名、端口 不同这种现象我们把它称之为跨域

跨域会导致:
1、无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
2、无法接触非同源网页的 DOM
3、无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)

二、导致跨域的根本原因

导致跨域的根本原因是请求浏览器的同源策略导致的 ,而跨域请求报错的原因是: 浏览器同源策略 && 请求是ajax类型 && 请求确实跨域了

三、解决方法

给大家介绍三种方法 jsonp,cors,代理转发

1 、JSONP

JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用,兼容性好(兼容低版本IE),缺点是只支持get请求,不支持post请求。
原理:img、srcipt,link标签的src或href属性不受同源策略限制,可以用来作为请求,后端接受请求后返回一个回调函数callback,调用前端已经定义好的函数,从而实现跨域请求。

举个很简单的例子 : 我们通过img标签的src属性, 请求一个网络地址的图片 ,这就是非同源请求了 ,但是由于浏览器的同源策略只对ajax请求有效所以 我们的请求不会受到影响 。换句话来说 只有ajax请求才会产生跨域问题。

2、 CORS

CORS 是跨域资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法。

CORS允许任何类型的请求。在使用CORS来访问数据的时候,客户端不需要更改任何数据访问逻辑。所有的一切工作都是在服务端及浏览器之间自动完成的。前端代码与发送普通Ajax请求没有差异,我们只需在服务端设置即可(后端的活)

3 、代理转发

ajax请求前端跨域问题原因及解决方案

在前端服务和后端接口服务之间 架设一个中间代理服务,它的地址保持和前端服务器一致,那么:
这样,我们就可以通过中间这台服务器做接口转发,在开发环境下解决跨域问题,看起来好像挺复杂,其实vue-cli已经为我们内置了该技术,我们只需要按照要求配置一下即可。

vue.config.js 的devServer(开发环境)里 配置代理服务器 通过这个代理服务器发送请求 这样就不纯在跨域的问题了 代码如下:

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

记得baseURL里的根路径 是相对地址,而不能是绝对地址

以上就是ajax请求前端跨域问题原因及解决方案的详细内容,更多关于ajax跨域问题原因及解决的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用jquery ajax获取网站Alexa排名的代码
Dec 12 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
浅谈Javascript中substr和substring的区别
Sep 30 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
jquery 时间戳转日期过程详解
Oct 12 jQuery
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
浅谈TypeScript 索引签名的理解
JavaScript 反射学习技巧
Oct 16 #Javascript
JS的深浅复制详细
Oct 16 #Javascript
JS 基本概念详细介绍
Oct 16 #Javascript
AJAX实现指定部分页面刷新效果
AJAX实现省市县三级联动效果
Oct 16 #Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 #Vue.js
You might like
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
世界第一个无线广播电台 KDKA
2021/03/01 无线电
PHP中对用户身份认证实现两种方法
2011/06/04 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
2015/12/03 Javascript
AngularJS入门之动画
2016/07/27 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
2017/09/22 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
laydate如何根据开始时间或者结束时间限制范围
2018/11/15 Javascript
20个必会的JavaScript面试题(小结)
2019/07/02 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python中单下划线(_)和双下划线(__)的特殊用法
2019/08/29 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
高尔夫球鞋、服装、手套和装备:FootJoy
2018/12/15 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
工程监理应届生求职信
2013/11/09 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
二手书店创业计划书
2014/01/16 职场文书
办公室文员工作职责
2014/01/31 职场文书
初中生操行评语大全
2014/04/24 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书