跨域问题：解决跨域方案(转)

最新推荐文章于 2023-09-15 08:33:57 发布

活下去，就是未来。

最新推荐文章于 2023-09-15 08:33:57 发布

阅读量385

点赞数 1

当前端页面与后台运行在不同的服务器时，就必定会出现跨域这一问题，本篇简单介绍解决跨域的三种方案，部分代码截图如下，仅供参考：
方式一：使用ajax的jsonp
前端代码

服务器代码

使用该方式的缺点：请求方式只能是get请求

方式二：使用jQuery的jsonp插件
插件下载网址：https://github.com/jaubourg/jquery-jsonp
前端代码

服务器代码

使用该方式的特点：与方式一相比，请求方式不只局限于get请求，还可以是post请求，但从服务器从获取的数据依然是jsonp格式

方式三：使用cors
前端代码

服务器代码

使用该方式的特点：与前两种方式相比，前端代码和未处理跨域前一样，即普通的ajax请求，但服务器代码添加了一段解决跨域的代码
   // 设置：Access-Control-Allow-Origin头，处理Session问题
       response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
       response.setHeader("Access-Control-Allow-Credentials", "true");
       response.setHeader("P3P", "CP=CAO PSA OUR");
       if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
           response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
           response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
           response.addHeader("Access-Control-Max-Age", "120");
       }

cors高级使用：在springmvc中配置拦截器
创建跨域拦截器实现HandlerInterceptor接口，并实现其方法，在请求处理前设置头信息，并放行

在springmvc的配置文件中配置拦截器，注意拦截的是所有的文件

四，maven项目引入三方cors包

下面就说一下cors在java tomcat下如何配置

首先下载jar包

cors-filter与java-property-utils

<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/cors-filter -->
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>2.5</version>
</dependency>
<!-- https://mvnrepository.com/artifact/com.thetransactioncompany/java-property-utils -->
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>java-property-utils</artifactId>
    <version>1.10</version>
</dependency>

修改web.xml

增加以下代码（最好放在其他filter前边）

<filter>         
    <filter-name>CORS</filter-name>  
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>  
    <init-param>  
     <param-name>cors.allowOrigin</param-name>  
        <param-value>*</param-value>  
    </init-param>  
    <init-param>  
     <param-name>cors.supportedMethods</param-name>  
        <param-value>GET, POST, HEAD, PUT, DELETE</param-value>  
    </init-param>  
    <init-param>  
     <param-name>cors.supportedHeaders</param-name>  
        <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>  
    </init-param>  
    <init-param>  
        <param-name>cors.exposedHeaders</param-name>  
        <param-value>Set-Cookie</param-value>  
    </init-param>  
    <init-param>  
        <param-name>cors.supportsCredentials</param-name>  
        <param-value>true</param-value>  
    </init-param>
</filter>  
  
<filter-mapping>  
    <filter-name>CORS</filter-name>  
    <url-pattern>/*</url-pattern>  
</filter-mapping>

jQuery请求示例

$.ajax("url", {
    type: "POST",
    xhrFields: {
        withCredentials: true,
        useDefaultXhrHeader: false
    },
    data: {
        type: "test"
    },
    dataType: 'json',
    crossDomain: true,
    success: function(data, status, xhr) {
    	console.log(data);
    }
});

以下感觉挺好

跨域问题目前笔者所用到的方案大致有三种:jsonp,SpringMVC 4以上注解方式和cros三方过滤器。

Jsonp

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

Jsonp原理：
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

使用JSON的优点在于：
比XML轻了很多，没有那么多冗余的东西。
JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
在JavaScript中处理JSON很简单。
其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势：
JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
如果你使用eval()来解析的话，会容易出现安全问题。
只支持GET方式的请求方式不支持POST，导致如果是非常复杂的参数传递会造成参数丢失，因为GET方式只能在URL后面拼接参数，而且限制只能是：
在IE8 下的URL地址总长度为：4076，超过该长度会自动忽略后面的内容；
在firefox 25下的URL地址总长度可以达到:7530，超过该长度会访问错误；

在chrome 29.0.1547.62 的最大总长度达到:7675，超过该长度会访问错误；

SpringMVC 4以上注解方式

SpringMVC 4

SpringMVC4提供了非常方便的实现跨域的方法。
在requestMapping中使用注解。 @CrossOrigin(origins = “http://localhost:9000”)
全局实现 .定义类继承WebMvcConfigurerAdapter

public class CorsConfigurerAdapter extends WebMvcConfigurerAdapter{

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/api/*").allowedOrigins("*");
    }
}

将该类注入到容器中：

<bean class="com.tmall.wireless.angel.web.config.CorsConfigurerAdapter"></bean>

Cros三方

pom.xml添加依赖

<!-- 跨域支持-->  
        <dependency>  
            <groupId>com.thetransactioncompany</groupId>  
            <artifactId>cors-filter</artifactId>  
            <version>2.5</version>  
        </dependency>

web.xml添加三方过滤器

<!--  提供跨域支持 -->
    <filter>    
        <filter-name>CORS</filter-name>    
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>    
        <init-param>    
            <param-name>cors.allowOrigin</param-name>   
            <param-value>*</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportedMethods</param-name>   
            <param-value>GET, POST, HEAD, PUT, DELETE</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportedHeaders</param-name>   
            <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.exposedHeaders</param-name>   
            <param-value>Set-Cookie</param-value>   
        </init-param>    
        <init-param>    
            <param-name>cors.supportsCredentials</param-name>   
            <param-value>true</param-value>   
        </init-param>    
    </filter>    
    <filter-mapping>    
        <filter-name>CORS</filter-name>    
        <url-pattern>/*</url-pattern>    
   </filter-mapping>

参数讲解

cors.allowOrigin指的可以通过的ip，代表所有，可以使用指定的ip，多个的话可以用逗号分隔，默认为
cors.supportedMethods指的是请求方式默认为*
cors.supportedHeaders请求支持的头信息，默认为*
cors.exposedHeaders暴露的头信息，默认的empy list
cors.supportsCredentials支持证书，默认为true
cors.maxAge 最大过期时间，默认为-1
cors.tagRequests 默认为false
cors.allowSubdomains允许子域默认为false

然后启动即可解决跨域问题，如果你需要限制访问域或者其他别的需求也可以自定义过滤器：

@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", "http://www.baidu.com");  
    //允许请求的方法
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");  
    //表明在3600秒内，不需要再发送预检验请求，可以缓存该结果
    response.setHeader("Access-Control-Max-Age", "3600");  
    //表明它允许跨域请求包含x-requested-with头
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with");  
    chain.doFilter(req, res);  
  }  
  public void init(FilterConfig filterConfig) {}  
  public void destroy() {}  
}

活下去，就是未来。

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
跨域问题：解决跨域方案(转)

当前端页面与后台运行在不同的服务器时，就必定会出现跨域这一问题，本篇简单介绍解决跨域的三种方案，部分代码截图如下，仅供参考：方式一：使用ajax的jsonp前端代码服务器代码使用该方式的缺点：请求方式只能是get请求方式二：使用jQuery的jsonp插件插件下载网址：https://github.com/jaubourg/jquery-jsonp前端代码服务器...
复制链接

扫一扫