前端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>