Shulou(Shulou.com)06/03 Report--

This article focuses on "how to solve the cross-domain problem of SpringBoot and Vue interaction", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to solve the cross-domain problem of SpringBoot and Vue interaction.

Catalogue

Browser homology policy

1. VUE front-end configuration agent to solve cross-domain

(1) Let browsers request to carry cookie in Vue

(2) configure agents in vue to solve cross-domain problems

The first step is to set the unified access path

The second step is to configure cross-domain agents

Step 3, test the request

2. Springboot backend configuration to solve cross-domain

Browser homology policy

Why is there a cross-domain problem? First of all, a definition must be understood, that is, the browser's homologous policy.

What is the same origin policy of the browser? to put it simply, the protocol, domain name and port for the browser to send the request should be the same as the protocol, domain name and port for the server to receive the request. This is the only way to complete the interaction, but it is obviously not possible, especially when developing front-and back-end separate projects on the same computer, two ports must be used. Then this creates a cross-domain problem.

I would like to share two methods that I use to solve cross-domain problems.

1. VUE front-end configuration agent to solve cross-domain (1) make browser requests carry cookie in Vue

Let's talk about how I found the cross-domain problem. At first, I didn't carry the browser's cookie when I sent the request from the front-end browser to the backend, but this made it impossible to verify the browser's request. So later, I used a method to ask the browser to carry cookie in the http request header every time I sent the request, as follows:

Write the following code in the main.js method of vue:

/ / introduce axios to rely on import axios from 'axios'// to make the request carry cookieaxios.defaults.withCredentials=trueVue.prototype.$axios = axios on the browser

The above indicates that the axios request, that is, the ajax request, is introduced, and the write credential is enabled at the same time. Only when the withCredentials is equal to the true will the cookie be carried.

(2) configure agents in vue to solve cross-domain problems

In fact, it is relatively simple to solve the cross-domain problem in vue, because the first half of the URL must be the same in every request sent by our browser, such as http://localhost:8080/blogs and http://localhost:8080/login, so we can extract their same URL and encapsulate it in axios.defaults.baseURL, so that we can abbreviate the request address to "/ blogs" every time we request. It is also equivalent to a simple encapsulation of the URL header.

Note: set the axios.defaults.baseURL of the unified request path =

"http://localhost:8080" should be written in axios.js

But when solving cross-domain problems, we should write axios.defaults.baseURL = "http://localhost:8080"" as axios.defaults.baseURL = "/ api".

In this way, the path we request will be preceded by the form "/ api".

This is also the first step:

The first step is to set the unified access path

Set axios.defaults.baseURL = "http://localhost:8080" to write as axios.defaults.baseURL =" / api "in axios.js

The second step is to configure cross-domain agents

Create a new js file vue.config.js under the same level directory of babel.config.js

Write the following code in it: this code is a proxy configured to solve cross-domain problems. The request connection of my background server here is http://localhost:8081, so if yours is not, you need to modify it.

/ * solve cross-domain problems * @ type {{devServer: {"/ api": {changeOrigin: boolean, pathRewrite: {"^ / api": string}, target: string}}, host: string, open: boolean} * / module.exports = {devServer: {host: 'localhost', open: true, / / automatically open browser / / proxy configuration table Here you can configure specific request proxies to the corresponding API interface / / for example, proxy 'localhost:8080/api/xxx' to' www.example.com/api/xxx' proxy: {'/ api': {/ / match all request paths starting with'/ api' target: 'http://localhost:8081', / / basic path of the proxy target / / secure: false, / / if it is the https interface You need to configure this parameter changeOrigin: true, / / support cross-domain pathRewrite: {/ / rewrite the path: remove the'/ api''^ / api':'}} at the beginning of the path} step 3, test the request

If we are going to send a login login request now, the request should look like this:

This.$axios.post ("/ login") II. Springboot backend configuration to solve cross-domain

If you want to solve the cross-domain problem at the back end of the springboot framework, you only need to add a class CorsConfig and let it implement the WebMvcConfigurer interface. The code is as follows. Generally, you can copy the code directly during development.

Import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer / * solve cross-domain problems * / @ Configurationpublic class CorsConfig implements WebMvcConfigurer {@ Override public void addCorsMappings (CorsRegistry registry) {registry.addMapping ("/ * *") .allowedOriginPattern s ("*") .allowedMethods ("GET", "HEAD", "POST", "PUT", "DELETE" "OPTIONS") .allowCredentials (true) .maxAge (3600) .allowedHeaders ("*") }} at this point, I believe you have a deeper understanding of "how to solve the cross-domain problem of interaction between SpringBoot and Vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.