前端Ajax跨域解决方案
业务场景:
前后端分离需要对接数据接口。
接口测试是在postman做的,今天才开始和前端对接,由于这是我第一次做后端接口开发(第一次嘛,问题比较多)所以在此记录分享我的踩坑之旅,以便能更好的理解,应用。
问题:
前端ajax请求后端接口出现跨域问题,如下图。
翻译:因为响应头没有"Access-Control-Allow-Origin",所以接口拒绝把数据返回给前端。
什么是Access-Control-Allow-Origin?
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。
浏览器只允许请求当前域的资源,而对其他域的资源表示不信任。那怎么才算跨域呢?
- 请求协议
http,https
的不同 - 域
domain
的不同 - 端口
port
的不同
其实说简单点,跨域,指的就是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器施加的安全限制。
同源是指:协议相同,域名相同,端口相同。三者同时成立才能叫同源。
浏览器的同源策略从它诞生的那一刻就出现了,具体是指从域名A下的一个页面(一般是通过ajax请求)获取域名B下的一个资源,是不被浏览器允许的。
跨域资源共享(CORS)是浏览器提供的一种跨域协商机制,让前后端协商是否可以发出跨域请求。 CORS添加了若干Access-controll-request-xxx 的头,给客户端声明自己的源、要使用的头部、用使用的请求方法;添加了若干Access-Controll-Allow-xxx的头,给服务端声明自己支持跨域的源、头部和方法。
URL | 说明 | 是否允许通信 |
---|---|---|
http://www.a.com/a.js http://www.a.com/b.js |
同一域名下 | 允许 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同一域名,不同端口 | 不允许 |
http://www.a.com/a.js https://www.a.com/b.js |
同一域名,不同协议 | 不允许 |
http://www.a.com/a.js http://70.32.92.74/b.js |
域名和域名对应ip | 不允许 |
http://www.a.com/a.js http://script.a.com/b.js |
主域相同,子域不同 | 不允许 |
http://www.a.com/a.js http://a.com/b.js |
同一域名,不同二级域名(同上) | 不允许(cookie这种情况下也不允许访问) |
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 不允许 |
两种解决方案(从后端开始解决)
一、
1、后端返回Jsonp格式的数据,在Json格式的基础上包上一层:handleCallback():
handleCallback({"status": true, "code": "200"})
==>
response.getWriter().write("handleCallback({\"status\": false, \"code\": \"500\"})");
2、前端ajax接收返回:
var userName=$("#userName").val();
var str_data={"UserName":userName};
$.ajax({
type: 'get',
async : false,
dataType: 'jsonp', //设置返回的类型时Jsonp类型
url: "http://localhost:8078/springBoot/User",
jsonpCallback: "handleCallback", //关键:回调函数名,与后端一致
data:str_data,
success: function(result){
console.log(result.code);
},
error:function(result){
console.log("error");
}
});
二、
1、后端直接设置Reponse允许跨域访问
public void UploadUserAvatars(HttpServletRequest request,HttpServletResponse response) throws Exception{
// 指定允许其他域名访问
response.addHeader("Access-Control-Allow-Origin","*");
// 响应类型
response.addHeader("Access-Control-Allow-Methods","POST");
// 响应头设置
response.addHeader("Access-Control-Allow-Headers","x-requested-with,content-type");
//响应内容支持中文
response.setContentType("text/html;charset=utf-8");
}
前端Ajax跨域解决方案的更多相关文章
- asp.net web api2.0 ajax跨域解决方案
asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种. 一,ASP.NET Web API支持JSONP,分两种 1, ...
- Ajax跨域解决方案大全
题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨 ...
- AJAX跨域解决方案
从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在,这似乎是一个很经典的问题了,是由于javascript的同源策略所导致. 解决的办法,大概有如下几种: 1. 使用中 ...
- 【PHP】Ajax跨域解决方案 、jsonp、cors
参考文章: 1.https://blog.csdn.net/u014727260/article/details/72793459 (后台java,实际上差不多) 2. 如何解决ajax跨域传输 数据 ...
- [妙味Ajax]第三课:AJAX跨域解决方案:JSONP
知识点总结: JSONP(JSON with Padding): 1.script标签 2.用script标签加载资源是没有跨域问题的 在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据), ...
- ajax跨域解决方案(服务端仅限java)
楼主前端知识菜鸟,高手勿喷,在此记录工作中遇到的问题及解决方案,大神请滤过 方法1.jsonp(js客户端ajax请求参数方式设置) 方法2.服务端接口设置: HttpServletResponse ...
- ajax跨域解决方案2
配置文件添加: <system.webServer> <httpProtocol> <customHeaders> &l ...
- 基于java过滤器实现的ajax跨域解决方案
http://software.dzhuvinov.com/cors-filter-configuration.html
- java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)
1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...
随机推荐
- C++第四次作业--继承与派生
C++ 继承 面向对象程序设计中最重要的一个概念是继承.继承允许我们依据另一个类来定义一个类,这使得创建和维护一个应用程序变得更容易.这样做,也达到了重用代码功能和提高执行效率的效果. 当创建一个类时 ...
- 小程序UI设计(8)-布局分解-FlexBox的align-content应用
FlexBox的align-content到底是什么鬼,我也搞了好半天才开发出来,目前工具中WViewRow组件使用了此属性,WViewColumn中此属性不起作用.下图是justify-conten ...
- ubuntu学习笔记-tar 解压缩命令详解(转)
tar 解压缩命令详解 -c: 建立压缩档案 -x:解压-t:查看内容-r:向压缩归档文件末尾追加文件-u:更新原压缩包中的文件 这五个是独立的命令,压缩解压都要用到其中一个,可以和别的命令连用但只能 ...
- 同一电脑如何安装多个jdk
1.安装对应的jdk 本机测试只安装jdk1.7和1.8 2.切换jdk 以我的环境为例,一开始装的是jdk1.7,要切换到jdk1.8时,需修改以下内容 环境变量,该为对应jdk的bin路径 修改注 ...
- 使用CreateWindowEx创建子窗口的注意事项
比如: 使用 HWND child = CreateWindowEx(0,L"childclass",NULL,WS_CHILD | WS_VISIBLE | WS_CLIPSIB ...
- 关于上部盒子里有图片下面盒子magin-top负值的层级问题
.box{ width: 800px; box-sizing: border-box; margin: 50px auto 0; background: pink; } .imgBox{ width: ...
- ALIENTEK 战舰ENC28J60 LWIP和UIP补充例程(LWIP WEB有惊喜)
前面的话:自从接触网络模块,到现在有一阵子时间了,未来必定是网络的世界.学一些网络方面的知识是有必要的.我们ALINTEK 推出的ENC28J60网络模块块作为入门还是不错的.详细见此贴:http:/ ...
- 题解 最长上升序列2 — LIS2
最长上升序列2 - LIS2 Description 已知一个 1 ∼ N 的排列的最长上升子序列长度为 K ,求合法的排列个数. Input 输入一行二个整数 N , K ( K ≤ N ≤ 15) ...
- Laravel dingo,HTTP的请求头(accept)无法携带版本号的解决方法
Laravel dingo,HTTP的请求头(accept)无法携带版本号的解决方法 2017年9月6日 原创分享 zencodex 使用 Laravel dingo 做api开发时,涉及 A ...
- 【BZOJ4671】 异或图
Description 定义两个结点数相同的图 G1 与图 G2 的异或为一个新的图 G, 其中如果 (u, v) 在 G1 与 G2 中的出现次数之和为 1, 那么边 (u, v) 在 G 中, 否 ...