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 相关文章推荐
js树形控件脚本代码
Jul 24 Javascript
js直接编辑当前cookie的脚本
Sep 14 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
JS获取IP、MAC和主机名的五种方法
Nov 14 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
纯javascript实现图片延时加载方法
Aug 21 Javascript
JavaScript实现阿拉伯数字和中文数字互相转换
Jun 12 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
Apr 19 Javascript
详解Angular2组件之间如何通信
Jun 22 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
PHP在字符串中查找指定字符串并删除的代码
2008/10/02 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
2014/04/25 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
Underscore.js常用方法总结
2015/02/28 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
2017/08/31 Javascript
js数组去重的N种方法(小结)
2018/06/07 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python中的异常处理简明介绍
2015/04/13 Python
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
python 将大文件切分为多个小文件的实例
2019/01/14 Python
Python3最长回文子串算法示例
2019/03/04 Python
浅析Python 中几种字符串格式化方法及其比较
2019/07/02 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
python exit出错原因整理
2020/08/31 Python
Python 多进程原理及实现
2020/12/21 Python
网页中的电话号码如何实现一键直呼效果_附示例
2016/03/15 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
财务管理专业毕业生求职信范文
2013/09/21 职场文书
应届毕业生就业自荐信
2013/10/26 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
大四自我鉴定
2014/02/08 职场文书
会议接待欢迎标语
2014/10/08 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
新学期主题班会
2015/08/17 职场文书