7.CORS支持

一、Web 开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS 等等 CORS 与 JSONP 相比

1、JSONP 只能实现 GET 请求,而 CORS 支持所有类型的 HTTP 请求。

2、使用 CORS,开发者可以使用普通的 XMLHttpRequest 发起请求和获得数据,比起 JSONP 有更好的错误处理。

3、JSONP 主要被老的浏览器支持,它们往往不支持 CORS,而绝大多数现代浏览器都已经支持了 CORS

浏览器支持情况

  • Chrome 3+

  • Firefox 3.5+

  • Opera 12+

  • Safari 4+

  • Internet Explorer 8+

二、在 spring MVC 中可以配置全局的规则,也可以使用@CrossOrigin 注解进行细粒度的配置。

全局配置:

@Bean
    public WebMvcConfigurer corsConfigurer() {

        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
            }
        };
    }

或者使用下面的方式

@Configuration
public class CustomCorsConfiguration2 extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
    }
}

具体实现:

CustomCorsConfiguration.java

package com.shuju.example.util.configuration;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class CustomCorsConfiguration {

    @Bean
    public WebMvcConfigurer corsConfigurer() {

        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**").allowedOrigins("http://localhost:8080");
            }
        };
    }
}

ApiController.java

package com.shuju.example.controller;

import java.util.HashMap;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;


@RestController
@RequestMapping(value = "/api", method = RequestMethod.POST)
public class ApiController {

    @RequestMapping(value = "/get")
    public HashMap<String, Object> get(@RequestParam String name) {
        HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("title", "hello world");
        map.put("name", name);
        return map;
    }
}

启动测试:

可以通过其他程序进行ajax请求测试

 $.ajax({
        url: "http://localhost:8080/api/get",
        type: "POST",
        data: {
            name: "测试"
        },
        success: function(data, status, xhr) {
            console.log(data);
            alert(data.name);
        }
    });

也可以使用postmans发送post测试

细粒度配置:

@CrossOrigin 注释

直接加在controller

package com.shuju.example.controller;

import java.util.HashMap;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

//  @CrossOrigin 所有的controller都支持
@RestController
@RequestMapping(value = "/api", method = RequestMethod.POST)
public class ApiController {
    @CrossOrigin(origins = "http://localhost:8080")
    @RequestMapping(value = "/get")
    public HashMap<String, Object> get(@RequestParam String name) {
        HashMap<String, Object> map = new HashMap<String, Object>(); map.put("title", "hello world");
        map.put("name", name);
        return map;
    }
}

资料

WebMvcConfigurerAdapter 在Spring5.0已被废弃

Last updated