AJAX跨域访问(从Tomcat8到Apache/Nginx)
1.在Tomcat的Root目录下放入如下的文件
apache-tomcat-8.0.12X64\webapps\ROOT
clientaccesspolicy.xml文件
<?xml version="1.0" encoding="utf-8" ?>
<access-policy>
<cross-domain-access>
<policy>
<allow-from http-request-headers="*">
<domain uri="*"/>
</allow-from>
<grant-to>
<resource path="/" include-subpaths="true"/>
</grant-to>
</policy>
</cross-domain-access>
</access-policy>
crossdomain.xml
<?xml version="1.0"?>
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
2.在项目的web.xml中加入如下的代码
apache-tomcat-8.0.12X64\webapps\test\WEB-INF
web.xml
<?xml version="1.0" encoding="ISO-8859-1"?> <web-app xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd"
version="2.4">
<display-name></display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list> <filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
<init-param>
<param-name>cors.allowed.origins</param-name>
<param-value>*</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.methods</param-name>
<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
</init-param>
<init-param>
<param-name>cors.allowed.headers</param-name>
<param-value>Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
</init-param>
<init-param>
<param-name>cors.exposed.headers</param-name>
<param-value>Access-Control-Allow-Origin,Access-Control-Allow-Credentials</param-value>
</init-param>
<init-param>
<param-name>cors.support.credentials</param-name>
<param-value>false</param-value>
</init-param>
<init-param>
<param-name>cors.preflight.maxage</param-name>
<param-value>10</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!--
<filter>
<filter-name>CorsFilter</filter-name>
<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>CorsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
-->
</web-app>
3.在Apache的httpd.conf中取消LoadModule headers_module modules/mod_headers.so 前面的注释
Apache\conf

4.修改Apache的httpd.conf中<Directory>配置节
Apache\conf

<Directory "D:/Project/Resource/">
AllowOverride None
Require all granted
Header set Access-Control-Allow-Origin *
Header set Access-Control-Allow-Headers "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
</Directory>
5.修改Nginx的nginx.conf中http{}配置节
nginx-1.8.0\conf

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers *;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE,PUT;
------------------------------------------------------------------------------------------------------------------------
在tomcat工程的HTML页面中可以应用AJAX来访问Apache中的数据
//var url = http://127.0.0.1/resource/JavaScript/gis/Z_QPF_20140831000000.F060.bin.bz2;
//nginx
var url = http://127.0.0.1:8010/Resource/JavaScript/gis/Z_QPF_20140831000000.F060.bin.bz2;
function loadData()
{
var xhr = new XMLHttpRequest();
if ("withCredentials" in xhr){
xhr.open("get", url, true);
console.log("withCredentials");
} else if (typeof XDomainRequest != "undefined"){
xhr = new XDomainRequest();
xhr.open("get", url);
console.log("XDomainRequest");
} else {
xhr = null;
}
xhr.responseType = "arraybuffer";
xhr.onload = function() {
if (this.status == 200) {
var arrayBuffer = this.response;
//......
}
}
}
6.Spring Boot项目将以下代码加到Application.java中
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4
return new CorsFilter(source);
}
AJAX跨域访问(从Tomcat8到Apache/Nginx)的更多相关文章
- 浅析JSONP-解决Ajax跨域访问问题
浅析JSONP-解决Ajax跨域访问问题 很久没有写随笔了,总是感觉没时间,其实时间就是...废话少说,前几天,工作上有一新需求,需要前端web页面异步调用后台的Webservice方法返回信息.实现 ...
- ajax跨域访问的解决方案
今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...
- Ajax跨域访问解决办法
方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...
- Web Api 2(Cors)Ajax跨域访问
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...
- ajax 跨域访问的解决方案
ajax 跨域访问的解决方案 一.什么是跨域: 1.什么样的请求属于跨域: 域名,端口有任何一个不相同都属于跨域: 二.跨域的常用几种解决方案: 1.jsonp: 2.iframe: 3.webcon ...
- Hbuilder编辑App时,ajax跨域访问失败问题
今天试着用Hbuilder写app的前段显示页面,在第一步时就被打住了,ajax异步调用服务器的登录接口时,报错, 显示这样的错误 XMLHttpRequest cannot loadhttp://w ...
- 关于JQuery Ajax 跨域 访问.net WebService
关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...
- JS Ajax跨域访问
js ajax跨域访问报"No 'Access-Control-Allow-Origin' header is present on the requested resource 如果请求的 ...
- ajax跨域访问http服务--jsonp
在前面一篇文章<Spring Cloud 前后端分离后引起的跨域访问解决方案>里我们提到使用ajax跨域请求其他应用的http服务,使用的是后台增加注解@CrossOrigin或者增加Co ...
- 同源策略和Ajax跨域访问
1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 何谓同源: URL由协议.域名.端口和路径组成,如果两个URL的协议 ...
随机推荐
- 云计算之路-阿里云上:借助IIS Log Parser Studio分析“黑色30秒”问题
今天下午15:11-15:13间出现了类似“黑色30秒”的状况,我们用强大的IIS日志分析工具——Log Parser Studio进行了进一步的分析. 分析情况如下—— 先看一下Windows性能监 ...
- Spring MVC 学习总结(七)——FreeMarker模板引擎与动态页面静态化
模板引擎可以让程序实现界面与数据分离,业务代码与逻辑代码的分离,这就提升了开发效率,良好的设计也使得代码复用变得更加容易.一般的模板引擎都包含一个模板解析器和一套标记语言,好的模板引擎有简洁的语法规则 ...
- SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程(支持单表或多表结查集分页)
SQL Server利用RowNumber()内置函数与Over关键字实现通用分页存储过程,支持单表或多表结查集分页,存储过程如下: /******************/ --Author:梦在旅 ...
- gulp 压缩js,css
最近做的前端项目中发现引用的js包太多,导致页面加载时反应很慢,所以首先想到的是将js和css压缩,提高加载速度. 我们先来看看抓到的当前页面响应时间: 页面异步加载,需要响应时间 7.41秒,这也太 ...
- 给swift程序猿留下深刻印象的10个Swift代码
通过使用单行代码完成同样的 10 个练习,我们来看看 Swift 和其他语言之间的较量. 将数组中每个元素的值乘以 2 使用map来实现 var arr = [1,2,3,4]; var newArr ...
- ES6笔记(3)-- 解构赋值
系列文章 -- ES6笔记系列 解构赋值,即对某种结构进行解析,然后将解析出来的值赋值给相关的变量,常见的有数组.对象.字符串的解构赋值等 一.数组的解构赋值 function ids() { ret ...
- C#中简单的继承和多态
今天我们来聊一聊继承,说实话今天也是我第一次接触. 继承的概念是什么呢?就是一个类可以继承另一个类的属性和方法(成员) 继承是面向对象编程中的一个非常重要的特性. 好了,废话不多说,下面切入正题: 1 ...
- Gson操作json
github:https://github.com/google/gson API:http://google.github.io/gson/apidocs/ 示例对象 package present ...
- Allok Video to FLV Converter 可以用的 FixFlash.exe
纸飞机 拷至 c:\windows\system32 ok 下载链接:http://pan.baidu.com/s/1eQwz0DO 软件下载:http://pan.baidu.com/s/1sjGv ...
- NoSQL入门概述
入门概述 1 NoSQL是什么? NoSQL(NoSQL = Not Only SQL ),意即"不仅仅是SQL",泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关 ...