The implementation steps of cross-domain deployment of vue project packaging and deployment

Cross-origin resource sharing (CORS, or commonly translated as cross-domain resource sharing) is a mechanism based on HTTP headers that allows the server to access and load its own resources by allowing the server to mark other sources (domains, protocols, or ports) besides itself. Cross-origin resource sharing also checks whether the server will allow the real request to be sent through a browser, which initiates a "preflight" request to the server hosted by the server. In preflight, the header sent by the browser is marked with the header used in the HTTP method and the real request. An example of cross-origin HTTP request: JavaScript code running on : uses XMLHttpRequest to initiate a request to / (that is, axios of vue, or ajax request from JQuery).

For security, browsers restrict cross-origin HTTP requests initiated within scripts. For example, the XMLHttpRequest and Fetch APIs follow a homologous policy. This means that web applications using these APIs can only request HTTP resources from the same domain that loads the application, unless the response message contains the correct CORS response header.

After packaging and deployment of front-end projects such as vue, cross-domain problems cannot be avoided. It's crazy, especially for beginners. Actually, it is not difficult to solve.

1. Front-end engineering solutions

1.1 Solutions for development

In vue development, you can configure proxy to solve cross-domain problems. Take vue3's vite as an example:
For example, our backend interface address prefix is: http://192.168.1.2/api/v1/, and you can configure the proxy in vite:

# Cross-domain proxy, you can configure multiple , please note that there are no newlinesVITE_PROXY = [["/api/v1","http://192.168.1.2/api/v1"]]
#Interface address (address used in the program)VITE_API_URL=/api/v1

1.2 Solutions after packaging and deployment

After the vue project is packaged, it is compiled into static js, and the vite proxy cannot be used. Generally, we use nginx to directly deploy the packaged program. We can configure reverse proxy in nginx to solve the problem:

server{
	listen 80;
	server_name localhost;
	index     ;
	root   /var/www/dist;
	error_log   logs/localhost_error.log crit;
	access_log  logs/localhost_access.log  access;
	# Interface address anti-generation    location /api/v1/ {
	    proxy_pass http://192.168.1.2/api/v1/;
	    proxy_redirect off;
	    proxy_set_header HOST $host;
	    proxy_set_header X-Real-IP $remote_addr;
	    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	    proxy_set_header X-Forwarded-Proto  $scheme;
	}
	rewrite ^(.*)\;(.*)$ $1 last;
	location ~* \.(eot|ttf|woff|woff2|svg|otf|html|htm|pdf|PDF|mp4|MP4)$ {
		add_header Access-Control-Allow-Origin *;
	}
	add_header Access-Control-Allow-Origin *;
}

2. Back-end engineering solutions

You can also configure cross-domain in the back-end project, create a new configuration class in springboot, and add the following beans to it:

In Spring WebMvc:

package ;
import ;
import ;
import ;
import ;
import ;
import ;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                ("/**")
                    .allowedOriginPatterns("*") //Available across domain names, * can be used to allow any domain name to be used                    .allowedMethods("*") //Any method (post, get, etc.)                    .allowedHeaders("*") //All request headers are allowed                    .allowCredentials(true) //Bring cookie information                    .exposedHeaders(HttpHeaders.SET_COOKIE)
                    .maxAge(3600L); //maxAge(3600) indicates that within 3600 seconds, no pre-check request is required, and the result can be cached            }
        };
    }
}

In Spring WebFlux:

package ;
import ;
import ;
import ;
import ;
import ;
import ;
import ;
@Configuration
public class CorsConfig implements WebFluxConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
       ("/**")
                    .allowedOriginPatterns("*") //Available across domain names, * can be used to allow any domain name to be used                    .allowedMethods("*") //Any method (post, get, etc.)                    .allowedHeaders("*") //All request headers are allowed                    .allowCredentials(true) //Bring cookie information                    .exposedHeaders(HttpHeaders.SET_COOKIE)
                    .maxAge(3600L); //maxAge(3600) indicates that within 3600 seconds, no pre-check request is required, and the result can be cached    }
}

This is the article about the cross-domain implementation steps of vue project packaging and deployment. For more related vue packaging and deployment cross-domain content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!