ajax 跨域

ajax跨域的原理

ajax出现请求跨域错误问题,主要原因就是因为浏览器的“同源策略”,可以参考

浏览器同源政策及其规避方法

CORS请求原理

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。

基本上目前所有的浏览器都实现了CORS标准,其实目前几乎所有的浏览器ajax请求都是基于CORS机制的,只不过可能平时前端开发人员并不关心而已(所以说其实现在CORS解决方案主要是考虑后台该如何实现的问题)。

关于CORS,强烈推荐阅读 :跨域资源共享 CORS 详解(阮一峰)(http://www.ruanyifeng.com/blog/2016/04/cors.html)

如何判断是否是简单请求?

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。只要同时满足以下两大条件,就属于简单请求。

请求方法是以下三种方法之一:HEAD、GET、POST。

HTTP的头信息不超出以下几种字段:

  • Accept

  • Accept-Language

  • Content-Language

  • Last-Event-ID

  • Content-Type(只限于三个值application/x-www-form-urlencoded、 multipart/form-data、text/plain)

凡是不同时满足上面两个条件,就属于非简单请求。

ajax跨域的表现

说实话,当初整理过一篇文章,然后作为了一个解决方案,但是后来发现仍然有很多人还是不会。无奈只能耗时又耗力的调试。然而就算是我来分析,也只会根据对应的表现来判断是否是跨域,因此这一点是很重要的。

ajax请求时,如果存在跨域现象,并且没有进行解决,会有如下表现。(注意,是ajax请求,请不要说为什么http请求可以,而ajax不行,因为ajax是伴随着跨域的,所以仅仅是http请求ok是不行的)

如何解决ajax跨域

一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:(注意,现在已经几乎不会再使用JSONP了,所以JSONP了解下即可)

JSONP方式解决跨域问题

jsonp解决跨域问题是一个比较古老的方案(实际中不推荐使用),这里做简单介绍(实际项目中如果要使用JSONP,一般会使用JQ等对JSONP进行了封装的类库来进行ajax请求)

实现原理

JSONP之所以能够用来解决跨域方案,主要是因为 <script> 脚本拥有跨域能力,而JSONP正是利用这一点来实现。

实现流程

JSONP的实现步骤大致如下(参考了来源中的文章)

客户端网页网页通过添加一个 <script> 元素,向服务器请求JSON数据,这种做法不受同源政策限制

请求时,接口地址是作为构建出的脚本标签的src的,这样,当脚本标签构建出来时,最终的src是接口返回的内容

服务端对应的接口在返回参数外面添加函数包裹层

由于 <script> 元素请求的脚本,直接作为代码运行。这时,只要浏览器定义了foo函数,该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象,而不是字符串,因此避免了使用JSON.parse的步骤。

注意:一般的JSONP接口和普通接口返回数据是有区别的,所以接口如果要做JSONO兼容,需要进行判断是否有对应callback关键字参数,如果有则是JSONP请求,返回JSONP数据,否则返回普通数据。

使用注意

基于JSONP的实现原理,所以JSONP只能是“GET”请求,不能进行较为复杂的POST和其它请求,所以遇到那种情况,就得参考下面的CORS解决跨域了(所以如今它也基本被淘汰了)

CORS解决跨域问题

CORS的原理上文中已经介绍了,这里主要介绍的是,实际项目中,后端应该如何配置以解决问题(因为大量项目实践都是由后端进行解决的),这里整理了一些常见的后端解决方案:

PHP后台配置

PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:

第一步:配置Php 后台允许跨域

第二步:配置Apache web服务器跨域(httpd.conf中)

原始代码

代理请求方式解决接口跨域问题

注意,由于接口代理是有代价的,所以这个仅是开发过程中进行的。

与前面的方法不同,前面CORS是后端解决,而这个主要是前端对接口进行代理,也就是:

  • 前端ajax请求的是本地接口

  • 本地接口接收到请求后向实际的接口请求数据,然后再将信息返回给前端

  • 一般用node.js即可代理

关于如何实现代理,这里就不重点描述了,方法和多,也不难,基本都是基于node.js的。

搜索关键字 node.js, 代理请求即可找到一大票的方案。

如何分析ajax跨域

上述已经介绍了跨域的原理以及如何解决,但实际过程中,发现仍然有很多人对照着类似的文档无法解决跨域问题,主要体现在,前端人员不知道什么时候是跨域问题造成的,什么时候不是,因此这里稍微介绍下如何分析一个请求是否跨域:

抓包请求数据

第一步当然是得知道我们的ajax请求发送了什么数据,接收了什么,做到这一步并不难,也不需要 fiddler等工具,仅基于 Chrome即可

  • Chrome浏览器打开对应发生ajax的页面, F12打开 DevTools

  • 发送ajax请求

  • 右侧面板-> NetWork-> XHR,然后找到刚才的ajax请求,点进去

 

ps:参考https://mp.weixin.qq.com/s/PbLGjHCyvDghX2ogREelkg

 

转载于:https://www.cnblogs.com/kerwing/p/8288767.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/414899.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

左右滑动实现activity之间的跳转

首先来看一下实现效果 1. BaseActivity extends Activity 首先&#xff0c;由于activity类之间存在很多共性 &#xff0c;比如跳以及滑动等事件&#xff0c;所以需要抽象出一个父类来&#xff0c;简化代码量。 附代码&#xff1a; /*** 按照1、2、3的步骤走* / public abstr…

3 View - 状态保持 session

1.状态保持 http协议是无状态的&#xff1a;每次请求都是一次新的请求&#xff0c;不会记得之前通信的状态客户端与服务器端的一次通信&#xff0c;就是一次会话实现状态保持的方式&#xff1a;在客户端或服务器端存储与会话有关的数据存储方式包括cookie、session&#xff0c;…

拖拽升空的Android小火箭

先上演示效果 1、MainActivity 主布局就两个Button按钮 &#xff1a;一开启、二关闭 就不贴主布局xml了 因为小火箭是游离在activity之外的&#xff0c;所以不能依赖activity的生命周期 需要注意的一点是不要忘记在清单文件里配置 service 贴一下代码&#xff1a; public class…

yii验证系统学习记录,基于yiicms(一)写的太长了,再写一篇(二)

项目地址&#xff1a;https://gitee.com/templi/yiicms 感谢七觞酒大神的付出&#xff0c;和免费分享。当然也感谢yii2的开发团队们。 项目已经安全完毕&#xff0c;不知道后台密码&#xff0c;这种背景下&#xff0c;后台无法进去。绕不开的话题就是&#xff1a; 1.后台密码账…

前端学习(2697):重读vue电商网站18之监听图片删除事件

Js // 处理图片移除的操作 handleRemove(file) {// 1.获取将要删除的图片的临时路径const filePath file.response.data.tmp_path// 2.从pics数组中&#xff0c;找到这个图片对应的索引值const idx this.addForm.pics.findIndex(x > x.pic filePath)// 3.调用数组的 spli…

vscode开发java接口跳转到实现

我是mac系统&#xff0c;按照默认是commandF12&#xff0c;但是我的mac 13寸&#xff0c;按照这个快捷键&#xff0c;就显示亮度调节了。所以需要使用插件IntelliJ IDEA Keybindings来解决这个问题。 快捷方式如下&#xff1a;

前端学习(2698):重读vue电商网站19之处理图片预览操作

图片预览窗可以用 el-dialog 组件来做&#xff0c;然后通过 on-preview 函数来处理图片预览的操作。 Js <!-- 图片预览 --> <el-dialog title"图片预览" :visible.sync"previewVisable" width"50%"><img :src"previewPath&…

Android 集成高德地图——当前定位,添加图标,画路线,设置显示中心位置,比例,地图刷新位置监听,判断GPS开启,去打开GPS

/*** 判断定位服务是否开启** param* return true 表示开启*/ public static boolean isLocationEnabled(Context context) {int locationMode 0;String locationProviders;if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {try {locationMode Settings.Secure.…

vscode-spring-boot YAML_UNKNOWN_PROPERTY 解决

使用vscode开发&#xff0c;安装了vscode-spring-boot ,报错如下 解决方案&#xff0c;增加对yml文件的识别 新增.vscode/settings.json 内容如下&#xff1a; {"files.associations": {"*.yml": "yaml"} }

Android之Junit测试类

今天跟着视频学习了Junit测试类&#xff0c;趁热打铁、顺便把学的东西整理下来&#xff0c;再就是为了以后好回顾 1、Junit单元测试介绍&#xff1a; 在实际开发中&#xff0c;经常要对已经实现的功能进行单元测试&#xff0c;以保证当前单元没问题&#xff0c;尽可能的减少已有…

前端学习(2699):重读vue电商网站20之使用Timeline 时间线

可视化地呈现时间流信息。 由于 vue-cli-plugin-element 最后更新时间是 2019年1月&#xff0c;而 element-ui 中 Timeline 时间线更新是在 3月份&#xff0c;因此我们没有办法直接进行引用。因此&#xff0c;我们直接通过手动导入的方式。 然后&#xff0c;我们打开 element.j…

Android 高德地图根据地址获取经纬度,计算两个坐标的距离

1、到高德开放平台申请&#xff0c;获取key 高德开放平台&#xff1a;https://lbs.amap.com/ 2、下载高德定位及地址搜索SDK:https://download.csdn.net/download/meixi_android/10845407 3、项目绑定高德SDK &#xff08;1&#xff09;配置key <meta-data android:name&q…

Android中WebService的应用

1.简介 Android中的WebService 是一种基于SOAP协议的远程调用标准。通过WebService可以将不同操作系统平台&#xff0c;不同语言、不同技术整合到一起。在Android SDK中并没有提供调用WebService的库&#xff0c;因此&#xff0c;需要使用第三方类库&#xff08;KSOAP2&#x…

宝塔 nginx 配置文件的存放目录配置vue的history模式

在项目中使用vue的history模式&#xff0c;需要配置文件&#xff0c;使用到宝塔面板的服务器。现在记录存放位置。 /www/server/panel/vhost/nginx配置history模式 try_files $uri $uri/ /index.html qkbim/index.html;配置跨域 add_header Access-Control-Allow-Origin *;ad…

查看Chome浏览器中已保存的密码

好累啊&#xff0c;今天上午模拟比赛&#xff0c;敲了一上午的代码&#xff0c;真是够够的&#xff1b;想想自己自学Java&#xff0c;然后自学Android&#xff0c;到现在一直没有放弃&#xff0c;其中要感激的人有很多很多&#xff0c;指导老师等等&#xff0c;最感谢的还是现在…

vscode开发java自定义代码模版

1、打开首选项配置 2、选择全局的 3、填写自己的代码块 {// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable…

前端学习(2702):重读vue电商网站23之element-ui 如何按需导入

在element.js 文件中&#xff0c;按照如下方式&#xff0c;进行按需导入即可。然后通过 Vue.use()方法进行引用。&#xff08;优化点&#xff1a;也就是将组建导入都放在一起&#xff0c;如果组件过多的话&#xff0c;支持换行&#xff09;

Socket实现Android客户端与服务器的通信

前言&#xff1a;题目要求故写一下总结。 1.什么是Socket? 网络用语叫套接字原理是基于tcp/ip 协议的一种通信手段&#xff0c;目前题目中要求无非就是当客户端数据异常时推送给服务器报警信息 往常接下来都是先看效果图的&#xff0c;由于今天回宿舍有点早&#xff0c;准备有…