zoukankan      html  css  js  c++  java
  • springCloud跨域访问

    转自:http://blog.csdn.net/wangkang80/article/details/72829390

    什么是跨域?

    假设你在http://xxx.com/test/下有一个js文件,从这个js里发出一个ajax请求请求后端服务,按照如下情况判定:

     

    解决方案:

    1) JSONP :

    动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了,而缺点也很明显,它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题

    2) NGINX代理 :

    通过一个代理服务器,将跨域的请求转发,如:前端JS在http://www.demo.com/a.js,后端是http://www.abc.com/app/action,通过代理可将后端的地址转换成http://www.demo/app/action,这样,从前端发起的请求,就不存在跨域的情况了

    3)CORS

    然后CORS是支持所有类型的HTTP请求,并且也只是服务端进行设置即可,但是缺点就是老的浏览器不支持CORS(如:IE7,7,8,等)

    什么是CORS

    Cross-origin resource sharing(跨域资源共享),是一个W3C标准,它允许你向一个不同源的服务器发出XMLHttpRequest请求,从而克服了ajax只能请求同源服务的限制.并且也可以通过灵活的设置,来指定什么样的请求是可以被授权的.

     

    CORS的响应头

    Access-Control-Allow-Origin : 必须的,允许的域名,如果设置*,则表示接受任何域名

    Access-Control-Allow-Credentials : 非必须的,表示是否允许发送Cookie,注意,当设置为true的时候,客户端的ajax请求,也需要将withCredentials属性设置为true

    Access-Control-Expose-Headers : 非必须的,表示客户端能拿到的header,默认情况下XMLHttpRequest的getResponseHeader方法只能拿到几个基本的header,如果有自定义的header要获取的话,则需要设置此值

    Access-Control-Request-Method : 必须的,表示CORS上会使用到那些HTTP方法

    Access-Control-Request-Headers : 必须的,表示CORS上会有那些额外的的有信息

    代码实现:

    @Component

    public class SimpleCORSFilter implements Filter {

        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, DELETE");

            response.setHeader("Access-Control-Max-Age", "3600");

            response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

            chain.doFilter(req, res);

        }

        public void init(FilterConfig filterConfig) {}

        public void destroy() {}

    }

    完整代码,详见:https://www.tianmaying.com/tutorial/cross-origin-rest-service

    也可以通过nginx配置CORS

    转自:https://enable-cors.org/server_nginx.html

    #

    # Wide-open CORS config for nginx

    #

    location / {

         if ($request_method = 'OPTIONS') {

            add_header 'Access-Control-Allow-Origin' '*';

            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

            #

            # Custom headers and headers various browsers *should* be OK with but aren't

            #

            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

            #

            # Tell client that this pre-flight info is valid for 20 days

            #

            add_header 'Access-Control-Max-Age' 1728000;

            add_header 'Content-Type' 'text/plain; charset=utf-8';

            add_header 'Content-Length' 0;

            return 204;

         }

         if ($request_method = 'POST') {

            add_header 'Access-Control-Allow-Origin' '*';

            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

         }

         if ($request_method = 'GET') {

            add_header 'Access-Control-Allow-Origin' '*';

            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';

            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

            add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';

         }

    }

  • 相关阅读:
    原创:【微信小程序】发送消息模板教程(后台以PHP示例)
    【微信小程序】详解wx:if elif else的用法(搭配view、block)
    原创:微信小程序+WEB使用JS实现注册【60s】倒计时功能
    微信小程序的POST和GET请求方式的header区别
    什么是单例模式
    Spring bean的生命周期
    对Spring Bean了解一二
    匿名内部类了解一二
    Eclipse中如何查看使用的JDK版本
    什么是语法糖
  • 原文地址:https://www.cnblogs.com/wangjuns8/p/7514527.html
Copyright © 2011-2022 走看看