这两天和前端同事调试微信公众号项目,就遇到了跨域问题;网上相关博客也挺多的,但有很多细节没有点到,在此呢我也再次记录一下解决方式;

(算是踩坑日记吧~ ~ ~)

  !问题发现:

  页面加载不出来,控制台报错:

当你看到类似上面的这种错误提示,基本上就是跨域问题咯~~~恭喜你中奖啦!

!! 问题解决方式一 —— Java过滤器

  

public class SimpleCORSFilter implements Filter {
@Override
public void destroy() {
}
@Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS,PUT, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.addHeader("Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept,timestamp,token,sign");
chain.doFilter(req, res);
}
@Override
public void init(FilterConfig arg0) throws ServletException {
}
}
 
<!--解决跨域问题: Web.xml 加以下内容 -->
<filter>
<filter-name>cors</filter-name>
<filter-class>com.wfcm.filter.SimpleCORSFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>cors</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>

注意!!!
response.addHeader("Access-Control-Allow-Headers","Origin, X-Requested-With, Content-Type, Accept,timestamp,token,sign");
含义为:允许脚本访问的返回头。其中Origin, X-Requested-With,* * 类似的值可选,如果你的接口请求头还有其他参数,请记得添加进去。
例子中的timestamp,token,sign 就是我接口系统需要带的验证参数,所以我需要添加上去;

!!! 问题解决方式二 —— Nginx配置

          if ($request_method = 'OPTIONS' ) {

               return 200;
           }

          add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Max-Age' '3600' always;
add_header 'Access-Control-Allow-Methods' "POST, GET, OPTIONS, DELETE, PUT" always;
add_header 'Access-Control-Allow-Headers' "Origin, X-Requested-With, Content-Type, Accept,timestamp,token,sign" always;
add_header 'Access-Control-Allow-Credentials' 'true';

 注意 !:

 if ($request_method = 'OPTIONS' ) {

      return 200;

  }

作用:不加的话会报下错

注意 !! :

if ($request_method = 'OPTIONS' )

其中if 和 () 中间一定要有空格,不然nginx 会报错 :nginx: [emerg] unknown directive "if($request_method" XXXXX

注意 !!  ! :

方式二 的内容放在 Nginx 中的 server   location/ {  模块中   }  才有效    ;而不是放在  http{ 模块中 }

注意 !!  !  ! :

若报错:The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed.

是因为跨域选项设置多了,查看下 服务端和nginx端是不是重复配置了Access-Control-Allow-Origin:*

更多Nginx 跨域配置可以参照借鉴博友的文章:

nginx通过CORS实现跨域

跨域问题Java方式解决及Nginx方式解决【亲测可行】的更多相关文章

  1. node作为中间层 —> 跨域请求java后台接口(使用http-proxy-middleware中间件)

    情景:利用node的express 作为中间层,跨域调取java后台接口,由于java接口对session有判断,因此每次请求都必须在req的headers中需要带上cookie,否则接口报500错误 ...

  2. ajax跨域访问 java controller 和 cxf(webservice) 配置方式(CORS)

    1. controller跨域访问,配置方式 重点在这里: <mvc:cors> <mvc:mapping path="/*" allowed-origins=& ...

  3. ajax发送请求跨域 - uri java代理

    问题:ajax发送请求出现cors跨域 解决办法:可以通过java代理的方式,后台发送请求 1.get请求 public void proxyGet(String url) { try { URL r ...

  4. Ueditor1.4.3实现跨域上传到独立文件服务器,完美解决单文件和多文件上传!

    再写配置方法之前先吐槽一下网上的各种教程,TM没一个有卵用,一群傻屌不会写就别写,写了就要负责. 百度google搜了半天,全是配置什么document.domain,根域名什么的,我只想对你说: 好 ...

  5. AJAX跨域问题解决方法(4)——调用方解决跨域

    调用方解决跨域的方法只有一种,那就是隐藏跨域. 何为隐藏跨域? 隐藏跨域的核心思路是通过反向代理隐藏跨域以欺骗浏览器 什么是反向代理?反向代理是指通过中间服务器使得访问同一个域名的两个不同url最终会 ...

  6. Jquery跨域访问java接口

    Jquery前台代码: <script> $.getJSON("http://跨域URL/Example/text.do?jsonpCallback=?", funct ...

  7. js 跨域 之 修改服务器配置-XAMPP-Apache (nginx 拉到最后!)

    js高程第21章提到了ajax 跨域技术,方法有很多,如图: 我主要讲这个: 其实代码就是这样就好了,当然只兼容 IE9 及之后的版本 ,IE9 之前的版本请去原书看吧,Page 600 var xh ...

  8. 一次跨域请求出现 OPTIONS 请求的问题及解决方法

    问题背景浏览器从一个域名的网页去请求另一个域名的资源时,域名.端口.协议任一不同,都是跨域 在前后端开发过程经常会遇到跨域问题.网上也都有解决方案. 写这篇文章时,我们碰到的一个场景是:要给s系统做一 ...

  9. 前后端分离跨域 关于前后端分离开发环境下的跨域访问问题(angular proxy=>nginx )

    前后端分离后遇到了跨域访问的问题: angular1中使用proxy很麻烦,最后还是失败结束:最后总结3种方法如下: 本人使用的第一种方法,只是开发环境下使用很方便! 1:禁掉谷歌的安全策略(Turn ...

随机推荐

  1. [笔记] Ubuntu 18.04源码安装caffe流程

    虽然Ubuntu 18.04可以通过apt安装caffe,但是为了使用最新的代码,还是值得从源码安装一遍的. 安装环境 OS: Ubuntu 18.04 64 bit 显卡: NVidia GTX 1 ...

  2. java知识框架

    从网上摘录的一张很经典的java学习框架图,和大家分享一下.

  3. NUMA架构的优缺点

    numa把一台计算机分成多个节点(node),每个节点内部拥有多个CPU,节点内部使用共有的内存控制器,节点之间是通过互联模块进行连接和信息交互.因此节点的所有内存对于本节点所有的CPU都是等同的,对 ...

  4. Python3.x:Selenium+PhantomJS爬取带Ajax、Js的网页

    Python3.x:Selenium+PhantomJS爬取带Ajax.Js的网页 前言 现在很多网站的都大量使用JavaScript,或者使用了Ajax技术.这样在网页加载完成后,url虽然不改变但 ...

  5. https nginx配置

    cd /saas/conf/nginx/ mkdir key cd key 创建key: openssl req -nodes -newkey rsa:2048 -keyout server.key ...

  6. web.xml servlet、servlet-mapping配置

    Servlet常称为服务器端小程序,即运行在服务器端的程序,用于处理及响应客户的请求. Servlet类是个特殊的java类,继承于HttpServlet. --------------------- ...

  7. spring boot加mybatis使用Map返回时,当值为空时属性也会没有(转)

    使用spring boot加mybatis时,设置Map返回,当值为空时属性也会没有,就会报错 在application.properties中加入下面配置,将会解决这个问题.   #当查询数据为空时 ...

  8. 100个gdb调试技巧

    找到的一个有参考价值的关于GDB调试的站点:https://gitlore.com/subject/15

  9. SVN错误:Failed to load JavaHL Library

    环境:jdk1.7(64bit),eclipse4.4(64bit),SVN1.10.3 问题:在利用subclipse同步资源时,报出错误提示 Failed to load JavaHL Libra ...

  10. Android 图形基础类Rect,扎实基础助腾飞

    转载请注明出处:王亟亟的大牛之路 上周把"垃圾桶动画写完了",然后这礼拜寻思着学习点啥,脑子闷逼了大半天,然后就找了点基础源码读读,把看的经历分享给大家. 先安利:https:// ...