前端JS跨域请求

前端JS跨域

作为一个WEB开发者而言，在开发的过程中，我们可能会时不时的需要调去第三方的接口数据，而通常为了优化体验，我们会采用异步交互的方式去处理，而作为异步交互常用的AJAX,其实是基于JS的基础之上的技术，因此在使用AJAX调用第三方接口的时候，也会受到JS同源策略的影响。

所谓同源策略，是指阻止从一个域上加载的脚本获取或操作另一个域上的文档属性，简单来说就是受到请求的URL的域必须与当前Web页面的域相同
           

为了解决这一个问题，前端出现了一种技术，JSONP。但是JSONP只支持GET方式的跨域请求，通过JSONP技术，我们能简单的实现AJAX跨域请求:

前端AJAX：
    $.ajax({
            type : "get",
            async : false,//async:是否异步，默认为true（异步）。
            cache : false,
            url : "url地址",
            data : { },
            dataType : "jsonp",//这个必须要加
            jsonp: "jsonpCallback",//执行完毕后的回调函数
            success : function(data) {
            },
            error : function() {
            }
        });
           

除此之外，在服务器端还要设定允许JSONP跨域

1.如果使用的是Spring4.2以上的框架版本，那么在对应的请求接口加上(@CrossOrigin):
  如果这个注解加在方法上，那么就是说明这个接口可以跨域请求
  如果是加在Controller类上，说明这个类里面的所有接口都能支持跨域请求。

2.做项目全局配置：
        @Bean
        public WebMvcConfigurer corsConfigurer() {
            return new WebMvcConfigurerAdapter() {
                @Override
                public void addCorsMappings(CorsRegistry registry) {
                    registry.addMapping("/greeting-javaconfig")
                            .allowedOrigins("http://localhost:8080");
                }
            };
        }

addCorsMappings()中的参数代表支持跨域的url，
allowedOrigins()中的参数代表可以访问该接口的域名，设置为"*"可支持所有域。

3.WEB项目通用配置
    （1）.引入相关的jar包 cors-filter-2.1.jar， java-property-utils-1.9.jar
    （2）.在web.xml中做配置：
        <filter>  
             <filter-name>CORS</filter-name>  
             <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>  
        </filter> 
        <filter-mapping>  
            <filter-name>CORS</filter-name>  
            <servlet-name>MyServlet</servlet-name>  
        </filter-mapping>  

        <filter-mapping>  
            <filter-name>CORS</filter-name>  
            <url-pattern>/*</url-pattern>  
        </filter-mapping> 
           

做完以上的配置，就可以在页面中使用AJAX做跨域请求了。

如果你在请求别人的服务器，并且别人服务器不支持你做AJAX跨域请求，那么你可以采取以下的方案：

在自己的服务器上调用对方的接口，把对象接口的返回数据再返回给自己的前端。
           

在这个过程中，你可以使用HttpClient这个类去完成调用对方的接口。

public static String getOtherServerRequestData(String url){
String result="";
try {
    // 根据地址获取请求
    HttpGet request = new HttpGet(url);//这里发送get请求
    // 获取当前客户端对象
    HttpClient httpClient = new DefaultHttpClient();
    // 通过请求对象获取响应对象
    HttpResponse response = httpClient.execute(request);

    // 判断网络连接状态码是否正常(0--200都数正常)
    if (response.getStatusLine().getStatusCode() == HttpStatus.SC_OK) {
        result= EntityUtils.toString(response.getEntity(),"utf-8");
    }
} catch (Exception e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}
return result;
}
           

HttpClient的Maven依赖

<!-- https://mvnrepository.com/artifact/org.apache.httpcomponents/httpclient -->
    <dependency>
        <groupId>org.apache.httpcomponents</groupId>
        <artifactId>httpclient</artifactId>
        <version>4.5.3</version>
    </dependency>