關於什么是跨域的問題，感興趣的同學可以看阮一峰老師的日志http://www.ruanyifeng.com/blog/2016/04/cors.html。
另外一個問題就是為什么form表單沒有跨域問題而ajax有跨域問題，這是因為ajax請求跨域是瀏覽器同源策略為了保護用戶隱私和安全所作的設置，而form表單在請求時會刷新界面而不會把請求結果返回給js，因此相對安全一些。
下面貼出我在springboot項目中的跨域配置。
1、CorsConfig
package com.example.demo;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 1 設置訪問源地址
corsConfiguration.addAllowedHeader("*"); // 2 設置訪問源請求頭
corsConfiguration.addAllowedMethod("*"); // 3 設置訪問源請求方法
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 4 對接口配置跨域設置
return new CorsFilter(source);
}
}
2、CorsQusetionApplication
package com.example.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RestController;
@SpringBootApplication
@RestController
public class CorsQusetionApplication extends SpringBootServletInitializer{
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder application) {
return application.sources(CorsQusetionApplication.class);
}
public static void main(String[] args) {
SpringApplication.run(CorsQusetionApplication.class, args);
}
@GetMapping("/get")
public Object getMethod() {
return "Stirng";
}
}
3、測試網頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
function crosRequest(){
$.ajax({
url:'http://localhost:8080/get',
type:'get',
dataType:'text',
success:function(data){
alert(data);
}
});
}
</script>
</head>
<body>
<button onclick="crosRequest()">請求跨域資源</button>
</body>
</html>
pom文件添加上web啟動包即可，啟動項目，將測試網頁test.html在電腦中任意位置放置，用瀏覽器打開，可以正常響應
注釋掉cors配置，重新啟動項目，將測試網頁test.html在電腦中任意位置放置，用瀏覽器打開，打開開發工具，發現控制台報錯
