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 相关文章推荐
JavaScript中链式调用之研习
Apr 07 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
Bootstrap 实现查询的完美方法
Oct 26 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
js Dom实现换肤效果
Oct 21 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
浅谈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/04 星际争霸
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
php获取mysql版本的几种方法小结
2008/03/25 PHP
浅析PHP程序防止ddos,dns,集群服务器攻击的解决办法
2013/06/18 PHP
PHP读取PPT文件的方法
2015/12/10 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
深入理解Javascript闭包 新手版
2010/12/28 Javascript
jQuery中(function(){})()执行顺序的理解
2013/03/05 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
探寻JavaScript中this指针指向
2016/04/23 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
react-router中的属性详解
2017/06/01 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
对layer弹出框中icon数字参数的说明介绍
2019/09/04 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
Vue跨域请求问题解决方案过程解析
2020/08/07 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
Python中进程和线程的区别详解
2017/10/29 Python
python 限制函数调用次数的实例讲解
2018/04/21 Python
python绘制多个子图的实例
2019/07/07 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
《分一分》教学反思
2014/04/13 职场文书
学习党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
职工宿舍管理制度
2015/08/05 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
Hive常用日期格式转换语法
2022/06/25 数据库