当前位置:网站首页>Solutions to cross domain problems
Solutions to cross domain problems
2022-07-07 12:20:00 【YXXYX】
introduction
Cross domain problems are usually encountered in projects with front end and back end separation , Cross domain arises because browsers are set up for security The same-origin policy , Only agreement (http/https)、 domain name (www.test.com)、 port (8080/8081…) When the three are the same, cross domain problems will not occur ;
This also explains why there are cross domain problems in projects with front-end and back-end separation , For example, we develop on the same server , Front-end url by :http://127.0.0.1:3000, And the back end url by :http://127.0.0.1:8080, Both ports are different. If you visit each other, cross domain problems will certainly occur ;
Pictured :
front end http://localhost:3000 Send a request back :http://localhost:8080/api/user/search/tags, But because the port number is different , So the request failed , The error message also shows cross domain policy blocking :has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Now let's share my solutions to cross domain problems ;
resolvent
Here are several ways to solve the above case ;
WebMvcConfig Configuration class cross domain configuration
Cross domain requests can be implemented through custom configuration classes , The specific configuration is as follows :
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
// Set the allowed cross domain paths
registry.addMapping("/**")
// Set the domain name that allows cross domain requests
// When Credentials The certificate is true when ,Origin It can't be an asterisk , It needs to be specific ip Address ( If the interface doesn't have cookie,ip You don't need to be specific ip)
.allowedOrigins("http://localhost:3000")
// Whether to allow certificates No longer default on
.allowCredentials(true)
// Set allowed methods
.allowedMethods("*")
// Cross domain allow time
.maxAge(3600);
}
}
The front end requests from the back end :
You can see that the request succeeded , And cross domain allowed url The front-end domain name configured for :http://localhost:3000
annotation @CrossOrigin Achieve cross-domain
This method is much simpler than the above method , Directly on the back end Controller Add this annotation to the class , By default, all cross domain requests are allowed , But it's better to indicate the requested domain name :
This also enables cross domain access , It's simpler than configuration , But there are drawbacks , The last one says ;
The result is not to show , Same as before ;
GateWay Gateway configuration
The gateway configuration is generally a separate gateway module in the microservice project , Because all requests in microservices must be filtered through the gateway , So the first request is to go to the gateway , We can configure cross domain in the gateway service :
In the gateway module application.yml Configure cross domain in the configuration file :
# Cross domain configuration :
spring:
cloud:
gateway:
globalcors: # Global cross domain processing
add-to-simple-url-handler-mapping: true # solve options The request is blocked
corsConfigurations:
'[/**]': # Set which requests to block ,/** Means to intercept all requests
allowedOrigins: # Allow cross domain requests for which websites
- "http://localhost:3000"
allowedMethods: # Allowed cross domain ajax Request method of
- "GET"
- "POST"
- "DELETE"
- "PUT"
- "OPTIONS"
allowedHeaders: "*" # Header information allowed to be carried in the request
allowCredentials: true # Is it allowed to carry cookie
maxAge: 360000 # The validity period of this cross domain detection
We can also customize the configuration file configuration :
/** * Cross domain unified configuration */
@Configuration
public class CorsConfig {
// To deal with cross domain
@Bean
public CorsWebFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
// Allowed request header
config.addAllowedMethod("*");
// Allowed request sources ( Such as :http://localhost:8080)
config.addAllowedOrigin("http://localhost:3000");
// The allowed request method ==> GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS, TRACE
config.addAllowedHeader("*");
// URL mapping ( Such as : /admin/**)
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());
source.registerCorsConfiguration("/**", config);
return new CorsWebFilter(source);
}
}
Both of these methods can realize the cross domain configuration of the gateway ;
summary
In general, three methods to solve cross domain problems are introduced , So how to choose actually ?
@CrossOrigin annotation : This method is suitable for individual projects , More flexible , Implement a simple ; every last Controller Cross domain allowed by interface url All very clear. , however Controller It's troublesome when there are many interfaces ;
WebMvcConfig Configuration class : This method is suitable for individual projects , And if you feel in every Controller Add @CrossOrigin If annotation is troublesome , You can use this method ;
GateWay Gateway configuration : This method is suitable for microservice projects , And the two methods I share are still relatively recommended to use the first method , Directly in application.yml File configuration ;
One thing to note : If the gateway is configured with cross domain , then Don't Configure cross domain elsewhere , For example, in Controller add @CrossOrigin annotation , If you cross domains like this, it is equivalent to no configuration , It will fail ;
边栏推荐
- SwiftUI 教程之如何在 2 秒内实现自动滚动功能
- 盘点JS判断空对象的几大方法
- Hi3516 full system type burning tutorial
- Swiftui tutorial how to realize automatic scrolling function in 2 seconds
- EPP+DIS学习之路(2)——Blink!闪烁!
- <No. 9> 1805. 字符串中不同整数的数目 (简单)
- Will the filing free server affect the ranking and weight of the website?
- Tutorial on principles and applications of database system (007) -- related concepts of database
- Unity map auto match material tool map auto add to shader tool shader match map tool map made by substance painter auto match shader tool
- 2022 8th "certification Cup" China University risk management and control ability challenge
猜你喜欢
2022 8th "certification Cup" China University risk management and control ability challenge
Tutorial on principles and applications of database system (009) -- conceptual model and data model
Zero shot, one shot and few shot
112. Network security penetration test - [privilege promotion article 10] - [Windows 2003 lpk.ddl hijacking rights lifting & MSF local rights lifting]
数据库系统原理与应用教程(009)—— 概念模型与数据模型
Mastering the new functions of swiftui 4 weatherkit and swift charts
<No. 9> 1805. 字符串中不同整数的数目 (简单)
Xiaohongshu microservice framework and governance and other cloud native business architecture evolution cases
Sonar:Cognitive Complexity认知复杂度
Superscalar processor design yaoyongbin Chapter 10 instruction submission excerpt
随机推荐
牛客网刷题网址
Flet tutorial 17 basic introduction to card components (tutorial includes source code)
让数字管理好库存
Will the filing free server affect the ranking and weight of the website?
Steps of redis installation and self startup configuration under CentOS system
30. Few-shot Named Entity Recognition with Self-describing Networks 阅读笔记
108.网络安全渗透测试—[权限提升篇6]—[Windows内核溢出提权]
Swiftui tutorial how to realize automatic scrolling function in 2 seconds
Completion report of communication software development and Application
How to connect 5V serial port to 3.3V MCU serial port?
powershell cs-UTF-16LE编码上线
MATLAB实现Huffman编码译码含GUI界面
Rationaldmis2022 advanced programming macro program
NGUI-UILabel
跨域问题解决方案
Review and arrangement of HCIA
Stm32f1 and stm32subeide programming example -max7219 drives 8-bit 7-segment nixie tube (based on SPI)
Sonar:Cognitive Complexity认知复杂度
2022 年第八届“认证杯”中国高校风险管理与控制能力挑战赛
源代码防泄密中的技术区别再哪里