- 作者：老汪软件技巧
- 发表时间：2024-08-30 07:02
- 浏览量：
1.什么是跨域？
跨域请求，就是说浏览器在执行脚本文件的ajax请求时，脚本文件所在的服务地址和请求的服务地址不一样。说白了就是ip、网络协议、端口都一样的时候，就是同一个域，否则就是跨域。这是由于Netscape提出一个著名的安全策略——同源策略造成的，这是浏览器对JavaScript施加的安全限制。是防止外网的脚本恶意攻击服务器的一种措施。
2.代码工程实验目标
让Spring Boot应用支持跨域
pom.xml
"1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<parent>
<artifactId>springboot-demoartifactId>
<groupId>com.etgroupId>
<version>1.0-SNAPSHOTversion>
parent>
<modelVersion>4.0.0modelVersion>
<artifactId>corsartifactId>
<properties>
<maven.compiler.source>8maven.compiler.source>
<maven.compiler.target>8maven.compiler.target>
properties>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-autoconfigureartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
<scope>testscope>
dependency>
dependencies>
project>
第一种跨域解决方法
使用 @CrossOrigin 注解可以轻松的实现跨域，此注解既可以修饰类，也可以修饰方法。当修饰类时，表示此类中的所有接口都可以跨域；当修饰方法时，表示此方法可以跨域，它的实现如下
package com.et.cors.controller;
import org.springframework.web.bind.annotation.*;
import java.util.HashMap;
import java.util.Map;
@RestController
public class HelloWorldController {
//@CrossOrigin
@GetMapping("/hello")
public String hello() {
System.out.println("get hello");
return "get hello";
}
@CrossOrigin
@PostMapping("/hello")
public String hello2() {
System.out.println("post hello");
return "post hello";
}
}
第二种跨域解决方法
通过 CorsFilter 跨域，“*”代表全部。”**”代表适配所有接口。 其中addAllowedOrigin(String origin)方法是追加访问源地址。如果不使用”*”（即允许全部访问源），则可以配置多条访问源来做控制。 例如：
config.addAllowedOrigin("http://www.liuhaihua.cn/");
config.addAllowedOrigin("http://test.liuhaihua.cn/");
package com.et.cors.filter;
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 MyCorsFilter {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("*");
config.setAllowCredentials(true);
config.addAllowedMethod("*");
config.addAllowedHeader("*");
UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
corsConfigurationSource.registerCorsConfiguration("/**", config);
return new CorsFilter(corsConfigurationSource);
}
}
第三种跨域解决方法
重写 WebMvcConfigurer
package com.et.cors.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*");
}
}
index.html
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
<script>
function btnClick() {
$.get('http://localhost:8088/hello', function (msg) {
$("#app").html(msg);
});
}
function btnClick2() {
$.post('http://localhost:8088/hello', function (msg) {
$("#app").html(msg);
});
}
script>
<body>
<div id="app">div>
<input type="button" onclick="btnClick()" value="get_button">
<input type="button" onclick="btnClick2()" value="post_button">
body>
html>
以上只是一些关键代码，所有代码请参见下面代码仓库
代码仓库3.测试
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
4.引用
