This is the fourth day of my participation in Gwen Challenge

The business scenario

The separation of front and back ends is the most commonly used development process at present. In this process, in addition to friendly discussion and research, the other front-end partners are most uncomfortable than the four words of cross-domain request

This article lists several ways to deal with it:

  • Vue devServer.proxy Proxy configuration
  • Vue Java is bundled with Maven
  • JSONP
  • Nginx proxy

The first two are available only for the specified technology stack, while the last two are available for all projects

Without further ado, let’s look at the code

plan

Vue devServer.proxy Proxy configuration

When using this method, be careful to close mock.js

We need to modify vue.config.js:

const proxy = require('http-proxy-middleware');

const proxy_url = {
    server: "http://127.0.0.1:9999"
}

module.exports = {   
    devServer: {host: 'localhost'.port: 8001.proxy: {'/api': {target: proxy_url.server,
                changeOrigin: true.ws: true.pathRewrite: {}}}}}Copy the code

See the HTTP-proxy-Middleware documentation on Github for details

This section describes the meanings of the following common parameters:

  • Target (string): Can be interpreted as setting axios’ baseURL, the root path of the request
  • Ws (Boolean): Indicates whether to proxy websocket
  • XFWD (Boolean): Specifies whether to add x-Forward headers
  • Secure: Indicates whether to verify the SSL certificate
  • ChangeOrigin (Boolean): Specifies whether to change the origin in the request header
  • PathRewrite (object): path rewriting rule. The content is an object. For example, {‘^/ API ‘: ‘/’} means willhttp://localhost:8001/api/testThe agent forhttp://127.0.0.1:9999/test

Vue Java is bundled with Maven

This approach is suitable for production mode of Java projects, mainly for back-end partners

First, we convert the front-end code to a module in the back-end Java project and write pom.xml:


      
<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://maven.apache.org/POM/4.0.0"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <artifactId>koala-ui</artifactId>
  <version>1.0 the SNAPSHOT</version>
  <parent>
    <groupId>cn.houtaroy</groupId>
    <artifactId>koala-build</artifactId>
    <version>1.0 the SNAPSHOT</version>
    <relativePath>../koala-build</relativePath>
  </parent>
</project>
Copy the code

After that, we use the exec-maven-plugin to modify the packaging command, POM.xml:

<build>
    <plugins>
      <plugin>
        <groupId>org.codehaus.mojo</groupId>
        <artifactId>exec-maven-plugin</artifactId>
        <executions>
          <execution>
            <id>exec-npm-install</id>
            <phase>prepare-package</phase>
            <goals>
              <goal>exec</goal>
            </goals>
            <configuration>
              <executable>yarn</executable>
              <arguments>
                <argument>install</argument>
              </arguments>
              <workingDirectory>${basedir}</workingDirectory>
            </configuration>
          </execution>
          <execution>
            <id>exec-npm-run-build</id>
            <phase>prepare-package</phase>
            <goals>
              <goal>exec</goal>
            </goals>
            <configuration>
              <executable>yarn</executable>
              <arguments>
                <argument>run</argument>
                <argument>build</argument>
              </arguments>
              <workingDirectory>${basedir}</workingDirectory>
            </configuration>
          </execution>
        </executions>
      </plugin>
    </plugins>
</build>
Copy the code

Here I use YARN, which can be modified according to the actual situation. The content in the arguments tag should also be written according to the actual package.json of the project

During Maven install, run YARN Run build at CMD

The most important and overlooked step is to adjust the output directory of the front-end packaged files in vue.config.js:

const vueConfig = {
  publicPath: '/'.outputDir: 'target/classes/public'.assetsDir: 'static'.// Other configurations
}

module.exports = vueConfig;
Copy the code

Now you can go pack your bags happily

JSONP

JSONP requires server-side support, which is not covered here, but can be referenced in this article

Nginx proxy

Using Nginx is, in my opinion, the perfect solution

Nginx also has excellent support for Web services

How to use Nginx and handle cross-domain problems can you refer to my detailed tutorial on how to use Nginx to handle cross-domain problems