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 25 Javascript
Javascript编程之继承实例汇总
Nov 28 Javascript
javascript基础语法——全面理解变量和标识符
Jun 02 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
AJAX和jQuery动态加载数据的实现方法
Dec 05 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
深入理解vue2.0路由如何配置问题
Jul 18 Javascript
JavaScript实现精美个性导航栏筋斗云效果
Oct 29 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 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
phpfans留言版用到的数据操作类和分页类
2007/01/04 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP编写的图片验证码类文件分享
2016/06/06 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
来自国外的30个基于jquery的Web下拉菜单
2012/06/22 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
使用js如何实现全选与全不选
2013/12/30 Javascript
Node.js实现的简易网页抓取功能示例
2014/12/05 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
原生js封装的一些jquery方法(详解)
2016/09/20 Javascript
Vue.js使用v-show和v-if的注意事项
2016/12/13 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
jQuery事件详解
2017/02/23 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
jQuery实现的滑块滑动导航效果示例
2018/06/04 jQuery
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
Python字符串中查找子串小技巧
2015/04/10 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
python中的协程深入理解
2019/06/10 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
Python中logging日志库实例详解
2020/02/19 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
拾金不昧表扬信范文
2014/01/11 职场文书
小学教师办公室制度
2014/02/03 职场文书
碧霞祠导游词
2015/02/09 职场文书
退休欢送会致辞
2015/07/31 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
python三子棋游戏
2022/05/04 Python