有关Ajax跨域问题的两种解决方法

概述

Ajax跨域是前端开发中常见的问题，本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法。

问题现象

当出现跨域访问的时候ajax通常会报类似如下错误：

XMLHttpRequest cannot load http://192.168.2.12:8001/oss/api/version/check. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

解决办法一：关闭浏览器的跨域安全设置，仅限于开发的时候测试用

以chrome浏览器为例，右键点击chrome的快捷方式，然后在Target的值后面追加 --disable-web-security，注意--前面有个空格。例如：

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security

启动之后，Chrome浏览器会提示您"您使用的是不受支持的命令行标记：--disable-web-security"，说不安全，因此仅限于测试。

这样就可以直接测试，不会出现跨域的错误了！

解决办法二：配置Web服务器支持跨域访问

这里描述以Tomcat为Web服务器情况下的解决办法，在Java Web程序的WEB-INF下的web.xml文件中加入如下配置即可。

<!--cors filter-->
  <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>

注意：org.apache.catalina.filters.CorsFilter下面有好几个配置的选项，上面没有配置时就采用系统的默认配置。在实际生产环境要根据需要进行配置来提高安全性。比如cors.allowed.origins配置允许访问的源地址，默认为所有，即*。此外，还有cors.allowed.methods，cors.allowed.headers等等。具体的配置细节请参见本文参考资料中的[1]。

以上两种方法均能解决ajax跨域问题，希望本文分享对大家有所帮助。

赞 (0)

相关推荐

  • AJAX的跨域访问-两种有效的解决方法介绍

    新的W3C策略实现了HTTP跨域访问,还亏我找了很久的资料解决这个问题:只需要在servlet中返回的头部信息中添加Access-Control-Allow-Origin这个既可.比如我要开放所有我本地的跨域访问,就设置如下:response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1/*");这样我本地的A工程中的AJAX请求就可以跨域请求B工程中的servlet.代码如下:HTML的JS的

  • jquery ajax跨域解决方法(json方式)

    最近公司开发的项目中很多地方需要跨域ajax请求,比如几个子域名下 http://a.****.com/index123.aspx, http://b.****.com/index2.aspx 都要请求用户json信息,然后再对数据进行处理,起初我和同事们试了很多种方法,使用$.ajax() 无论是get或post方法都会引起uri deny的错误.一番GG之后发现了解决方法,也了解其中的原因. jquery从1.2开始,.getJSON就支持跨域操作了.使用jquery.getJSON()方法

  • IE9版本以下ajax 跨域问题可行解决方法

    ajax跨域请求数据在谷歌火狐我本地IE11都是没问题的. 让测试就发现问题了,IE8下请求不到数据,然后我查看一下自己写的js看有没有不兼容问题,可是都没有啊,为什么就请求不到呢. 我把ajax的error打印出来提示no transport,网上找了资料在js中第一行加这个就可以了jQuery.support.cors = true; 好了这个问题没有了,可是又有另一个error没有权限.这个问题百度了好多都没有我想要的,最后看了一篇文章让我豁然开朗这是IE浏览器的安全性设置问题, 解决方法

  • ajax跨域请求js拒绝访问的解决方法

    求解决办法 复制代码 代码如下: ajax{ url :"http://xxxx/app", type:"POST"; dataType:"json", } 不能用jsonp 因为jsonp发送数据 type 为 get type 必须为post url 不能加参 (例:http://xxxx/app?callback=aaa) 返回数据位json格式.求方法

  • 有关Ajax跨域问题的两种解决方法

    概述 Ajax跨域是前端开发中常见的问题,本文描述了以Google浏览器Chrome作为客户端和以Tomcat作为Web服务器的情况下的解决办法. 问题现象 当出现跨域访问的时候ajax通常会报类似如下错误: XMLHttpRequest cannot load http://192.168.2.12:8001/oss/api/version/check. No 'Access-Control-Allow-Origin' header is present on the requested re

  • 详解js跨域请求的两种方式，支持post请求

    JSONP实现跨域 常用的jquery实现跨域调用 $.ajax({ url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php", dataType: "jsonp", jsonp: "callback", context: document.body, success: function(data) { console.log(data); } }); 这个调用实际上

  • SpringBoot跨域问题的五种解决方式

    SpringBoot跨域问题的五种解决方式

    目录 一.什么是跨域 CORS 二.为什么会有跨域问题 三.有哪些跨域类型 四.解决跨域问题的五种方式 1. 添加跨域配置类 2. 重写WebMvcConfigurer 3. 注解 @CrossOrigin 4. 自定义过滤器 5. 手动设置响应头 前后分离的跨域问题其他解决方案 Nginx服务器反向代理 或者直接在Nginx中进行配置 总结 一.什么是跨域 CORS 当一台服务器资源从另一台服务器(不同 的域名或者端口)请求一个资源或者接口,就会发起一个跨域 HTTP 请求. 举个简单的例子,

  • 浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    浅析jsopn跨域请求原理及cors（跨域资源共享）的完美解决方法

    由于同源策略的缘故,ajax不能向不同域的网站发出请求. 比如a站localhost需要向b站请求数据,地址为:http://www.walk-sing.com/api.php 请求的代码如下: <html> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $.get

  • PL/SQL Developer过期的两种解决方法

    PL/SQL Developer过期的两种解决方法

    方法一: 1.首先,登陆PL/SQL Developer,PL/SQL Developer要到期了 2.输入指令"regedit"打开注册表,如图所示 3.然后,在注册表里按HKEY_CURRENT_USER\Software\Allround Automations 这个路径找到"Allround Automations ",然后删除它. 4.删除上一步中的后,在找到HKEY_CURRENT_USER\Software\Microsoft\Security,删除&

  • JavaScript监听手机物理返回键的两种解决方法

    JavaScript没有监听物理返回键的API,所以只能使用 popstate 事件监听. 有两个解决办法: 1.返回到指定的页面 pushHistory(); window.addEventListener("popstate", function(e) { window.location = 'http://www.baidu.com'; }, false); function pushHistory() { var state = { title: "title&quo

  • js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    方法一:(伪装form表单提交) linkredwin = function(A,B,C,D,E,F,G){ var formredwin = document.createElement("form"); formredwin.method = 'POST'; document.body.appendChild(formredwin); formredwin.action = "http://www.A.com/A.wiki?A=" +encodeURI(A) +

  • ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法

    这是一个小bug,解决方法有两种:根据做的东西不同选择不同的 <ion-nav-bar class="bar-positive"> <ion-nav-back-button class="button-icon ion-arrow-left-c"> </ion-nav-back-button> <h2>helloafds</h2> </ion-nav-bar> <ion-header-ba

  • jquery与js函数冲突的两种解决方法

    如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法 其一: 复制代码 代码如下: jQuery.noConflict(); jQuery(function($) { $("p").click(function() //在函数内继续可以使用jquery类库的$()方法 { alert($(this).text()); }) }) var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$

  • Vue.js 中 axios 跨域访问错误问题及解决方法

    1.假如访问的接口地址为 http://www.test.com/apis/index.php  (php api 接口) 2.而开发地址为http://127.0.0.1:8080,当axios发起请求时,出现如下错误: Failed to load http://www.test.com/apis/index.php?&act=login: The value of the 'Access-Control-Allow-Origin' headerin the response must no

随机推荐