preface

When we are doing projects, we often encounter cross-domain problems. In Java, we can let the back end use the CorsFilter class to make the corresponding configuration for us, which domain name is allowed to cross-domain request. For example, I did this before, the code is as follows:

package com.jserm.config; 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 CorsConfig { public CorsConfig() { } @Bean public CorsFilter corsFilter() { // 1. CorsConfiguration config = new CorsConfiguration(); config.addAllowedOrigin("http://localhost:3000"); // config.addAllowedOrigin("http://localhost:2000"); // config.addAllowedOrigin("*"); / / set whether to send the cookie information config. SetAllowCredentials (true); Config. addAllowedMethod("*"); // Set the allowed header config.addAllowedHeader("*"); / / 2. To add url mapping path UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource (); corsConfigurationSource.registerCorsConfiguration("/**", config); return new CorsFilter(corsConfigurationSource); }}Copy the code

However, if the backend does not want to write, it is up to us. In Vue, we can use the proxy in WebPack devServer to solve the problems generated during development. When deployed online, we can use nginx reverse proxy configuration proxy_pass to solve the cross-domain problems. But there are two things to be clear about first, 1. The use of proxy in VUE solves the problem of cross-domain development, but it does not work when deployed online, so nginx, 2, is used when deployed online. You can’t set CorsFilter at the back end and configure proxy at the front end at the same time, which will also cause problems. In my own case, after configuring proxy, I always reported 404. At first, I always thought that I did not configure the proxy properly.

How to use proxy to solve the front-end cross-domain problems during development

If you want to use proxy to solve cross-domain problems at development time, don’t write the baseurL that encapsulates AXIOS as a full URL. Otherwise, it will use the BaseurL concatenated URI configured by AXIOS to send requests, and the proxy won’t work. For example, if you want to request a localhost:8088 interface from localhost:2000, if you write axios’ baseurl as localhost:8088, the proxy will not work. The correct way to do this is to write baseurl as “”, or whatever prefix you want, such as “/ API “, so that it will use the vue startup address + the prefix + the AXIos URI to make the request. This is where proxy comes in, but there is an important point here, which is roughly two cases, 1. The backend interface is prefixed with/XXXX context-path, 2. The backend interface no unified context – path, such as localhost: 8088 / API/user/login, localhost: 8088 / API/user/register and localhost: 8088 / user/login, localh Ost :8088/user/register :8088/user/register :8088/user/register :8088/user/register :8088/user/register :8088/user/register :8088/user/register

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8088/',
      changeOrigin: true,
      pathRewrite: {
        "^/api": ""
      }
    }
  },
  port: 2000
}
Copy the code

Said here is my request axios http://localhost:2000/api/user/login is the proxy to http://locahost:8088/user/login I here the pathRewrite rewrite because I didn’t backend interface A unified context – path, if the backend interface is localhost: 8088 / API/user/login, localhost: 8088 / API/user/register this unified prefix, then don’t pathRewrite rewrite. If you write baseUrl as empty, then the AXIos URL should always be prefixed with /, It finally requested url address is localhost: 2000 / aticle/user/login instead of localhost: 2000 / user/login, I wrote here recommend axios baseUrl “/”, so that when you use axios way, Urls can be added with or without /, and do not use ‘./’ in non-hash mode. If so, the URL will always concatenate the path of the front-end route

export const loginTest = ({ userEmail, password }) => { const data = { userEmail, Password} return axios.request({url: '/user/login', // if axios' baseurl is empty, it must be completed /, otherwise it will concatenate the path of vue front end route data, method: 'post' }) }Copy the code
devServer: {
  proxy: {
    '/': {
      target: 'http://localhost:8088/',
      // pathRewrite: {
      //   "^/api": ""
      // }
    }
  },
  port: 2000
}
Copy the code

Use Nginx to solve cross-domain problems in online deployment

I still think in my case, Because of my own axios baseUrl is written “/ API”, all requests will be this format localhost: 2000 / API/user/loigin, localhost: 2000 / API/user/register, Localhost: 2000 / API/XXXXX, but, my backend interface is not a unified context – path API the prefix, so my nginx reverse proxy configuration is as follows

server { listen 80; server_name localhost; location =/ { root D:\blog-admin\dist; index index.html; } location ~* .*.(png|html|js|css|jpg)$ { root D:\blog-admin\dist; } location ^~ /index.html { root D:\blog-admin\dist; } location/API {proxy_pass http://127.0.0.1:8088/; Here said all localhost/API/XXX will be agent for http://127.0.0.1:8088/xxxx, here will involve nginx proxy_pass path only splicing rules, the concrete would not be in the expansion}}Copy the code

always

Hope this article can help to you, and some unnecessary step hole, the key lies in understanding, also don’t devServer contact nginx configuration of the other, without any relationship between them, when they are front mode can be understood as a method to solve the problem of cross-domain, one for the back-end to deploy a solution to the problem of the cross-domain again, There is no relationship between the two, so you can do the configuration with ease