正常使用ajax调用java.com
$.ajax({
type: 'get',
url: 'http://www.java.com/custinfo?id=888',
dataType: 'json',
success: function(data){
console.log('成功');
}
});
你会发现无法调用

原因:

JavaScript出于安全方面的考虑,不允许跨域调用其他项目。

跨域,由于浏览器同源策略的限制,a.com 无法调用 b.com

解决方案:  JSONP

JQuery调用jsonp

var url = 'http://www.java.com/custinfo?id=888&jsoncallback=?';
$.getJSON(url,function(data){
  console.log('成功');
});

注意:如果java.com返回的是JSON格式的数据,你是取不到的。

你会发现回调函数并没有调用

json格式示例:

{
"code":"200",
"msg":"成功" ,
"data":[
{
"custNo":"100088"
"id":"888"
}
]
}

如果服务端返回的是上面JSON格式的数据你是取不到的。

需要服务端修改代码,返回JSONP格式的数据。

jsonp格式示例:

jsonpcallback(
{
"code":"200",
"msg":"成功" ,
"data":[
{
"custNo":"100088"
"id":"888"

}
]
}
)

看到两种格式的区别了吗?

-----------------------------------------------------------------------------

JSONP 只可以发送 GET 请求,无法发送其他类型的请求,

推荐在后端通过 (CORS,Cross-origin resource sharing) 来解决跨域问题。

传统的SSM 框架通过在 XML 文件中配置 CORS 来解决跨域问题 ,

Spring Boot通过实现WebMvcConfigurer接口然后重写addCorsMappings方法解决跨域问题

@Configuration
public class CorsConfig implements WebMvcConfigurer { @Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
.maxAge(3600);
} }

----------------------------------------------------------------------------------

Spring Boot项目前后端分离部署需要解决跨域问题。
cookie存放用户登录信息,在spring拦截器进行权限控制,当权限不符合时,直接返回给用户固定的json结果。
当用户登录以后,正常使用;当用户退出登录状态时或者token过期时,由于拦截器和跨域的顺序有问题,出现了跨域的现象。
http请求,先走filter,到达servlet后才进行拦截器的处理,把cors放在filter里,就可以优先于权限拦截器执行。

@Configuration
public class CorsConfig { @Bean
public CorsFilter corsFilter() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
corsConfiguration.setAllowCredentials(true);
UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
} }

js ajax跨域调用的更多相关文章

  1. js Ajax跨域调用JSON并赋值全局变量

    //跨域调用JSON <script type="text/javascript"> function _callback(obj) { alert(obj); } j ...

  2. jquery ajax跨域调用

    客户端: //ajax跨域调用的方法 $.ajax({ url:dustUrl+"/screenshot/getDevices.do", type: "get" ...

  3. 以短链服务为例,探讨免AppKey、免认证、Ajax跨域调用新浪微博API

    新浪微博的API官方提供了很多种调用方式,支持编程的,归根结底就是两种: 1.基于Oauth协议,使用Open API.(http://open.weibo.com/wiki/%E6%8E%88%E6 ...

  4. AJAX跨域调用相关知识-CORS和JSONP(引)

    AJAX跨域调用相关知识-CORS和JSONP 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容. 但是我们项目开发过程中,经常 ...

  5. AJAX跨域调用ASP.NET MVC或者WebAPI服务

    关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案 作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP. ...

  6. 支持ajax跨域调用的WCF搭建示例

    支持ajax 跨域调用的WCF搭建 1.新建一个"ASP.NET空Web应用程序"项目. 2.新建一个“WCF服务(支持ajax)”. 3.修改WCFAjaxService.svc ...

  7. AJAX跨域调用ASP.NET MVC的问题及解决方案

    AJAX跨域调用ASP.NET MVC的问题及解决方案 问题描述: 解决方法: 只需要在web.config中添加如下标为红色的内容即可: <system.webServer> <h ...

  8. JS Ajax跨域访问

    js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...

  9. 调用ajax 跨域调用接口

    //ajax 跨域请求数据 function ajaxType (){ $.ajax({ url: "http://127.0.0.1:9090/spring_mvc/HttpClient/ ...

随机推荐

  1. CSS - 去除图片img底侧空白缝隙

    1. 图片底部有空隙 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. linux查漏补缺-linux命令行安装mysql

    apt安装 sudo apt-get update sudo apt-get install mysql-server root@192:/sys/fs/cgroup# apt-get install ...

  3. rundll32 常用命令

    Rundll32 常用命令列表(1) 下面是具体的Rundll32 的命令行列表: 添加删除程序 RunDll32.exe shell32.dll,Control_RunDLL appwiz.cpl, ...

  4. 在Windows中实现Java调用DLL(转载)

    本文提供调用本地 C 代码的 Java 代码示例,包括传递和返回某些常用的数据类型.本地方法包含在特定于平台的可执行文件中.就本文中的示例而言,本地方法包含在 Windows 32 位动态链接库 (D ...

  5. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:表示信息变化的操作

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Windows驱动开发-Device结构体

    每个驱动程序会创建一个或多个设备对象,每个设备对象都会有一个指针指向下一个设备对象 Device结构体源码 typedef struct DECLSPEC_ALIGN(MEMORY_ALLOCATIO ...

  7. Python学习第六课——基本数据类型一之tuple and dict

    元组 (tuple) tu=(11,22,(123,456),[22,55],) # 一般定义元组的时候最后面加一个, # 元组不能被修改或者删除 v = tu[0] # 也可以根据索引取值 prin ...

  8. 三星 S10 运行 Ubuntu 系统

    导读 DeX 是一种模仿桌面操作系统的用户 UI 界面,把支持 DeX 的三星手机用数据线连上外置显示器,用户就可以获得一种类似桌面系统的使用体验. 三星 S8.Note 8.S9.Note 9.S1 ...

  9. linux 串口 拼帧处理

    串口每次read数据可能不是完整的数据,参照网上的代码,写了拼帧的代码#include <stdio.h> #include <termios.h> #include < ...

  10. java关于hasNext()

    编写一段程序实现如果输入的一组数中含非整数数字,输出数字相加的和以及"attention"字符,如果全部是数字便输出数字的和. 程序1: package mian; import ...