Cross-domain issues in front-end and back-end separation of Vue+SpringBoot

In the front-end and back-end separation development, the front-end needs to call the back-end API and display the content. If the front-end and back-end development are both on the same host, due to the browser's homology policy restrictions, cross-domain problems (different protocols, domain names, port numbers, etc.) will arise, resulting in the inability to call the API interface normally, causing inconvenience to development.

Encapsulating API requests

import axios from 'axios'

//axios.create creates an axios instance and writes configuration for the instance. All subsequent requests sent through the instance are subject to the current configuration. const $http = axios.create({
    baseURL: '',
    timeout: 1000,
    //headers: {'X-Custom-Header': 'foobar'}
});

// Add request interceptor $http.interceptors.request.use(function (config) {
    // Do something before sending the request return config;
}, function (error) {
    // Do something with request error return Promise.reject(error);
});

// Add response interceptor $http.interceptors.response.use(function (response) {
    // Do something with the response data return response.data; // Return the data part of the response data }, function (error) {
    // Do something with the error return Promise.reject(error);
});

export default $http

API call function

export const getCourses = () => {
return $http.get('http://localhost:8080/teacher/courses')
} 

In this example, the front-end uses port 8081, the back-end uses port 8080, and the front-end fails to request data by calling the API.

Postman tests that this API interface is normal

How to solve the homology problem?

1. Create a new vue.config.js file in the vue root directory and configure it

vue.config.js file

module.exports = {
    devServer: {
        host: 'localhost', //Host number port: 8081, //Port number open: true, //Automatically open the browser proxy: {
            '/api': {
                target: 'http://localhost:8080/', //Interface domain name changeOrigin: true, //Is it cross-domain? ws: true, //Is it a proxy for websockets?
                secure: true, //Whether https interface pathRewrite: { //Path reset '^/api': '/'
                }
            }
        }
    }
};

2. Modify API request

API call function

export const getCourses = () => {
  return $http.get('/api/teacher/courses')
}

Here, because vue.config.js configures the interface domain name, the url here only needs to write the rest

URL full body

http://localhost:8080/teacher/courses

But here, because of the use of proxy, add '/api' before the remaining part (i.e. '/teacher/courses') to form '/api/teacher/courses'

At this point, the cross-domain problem is solved, and the front-end can get data from the back-end interface and display it

Problem solved!

This is the end of this article about the cross-domain problem in the front-end and back-end separation of Vue+SpringBoot. For more relevant vue SpringBoot front-end and back-end separation cross-domain content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!