Nginx's practical method for solving cross-domain problems

Separate the front and back ends and use nginx to solve cross-domain problems

Front-end: vue.js+nodejs+webpack

Backstage: SpringBoot

Reverse proxy server: nginx

Idea: Package the front-end code, let nginx point to static resources, and nginx forwards the background requests.

1. Package the front-end code:

npm run build

A dist folder will be generated. Contains an index.html file and a static folder. The path is based on my local location as an example:

/Users/xxx/ideaProjects/webtest/dist

2. Open

In the nginx.conf file in the /usr/local/etc/nginx directory, add the following to the server:

listen 80; #Original 8080, to avoid conflicts, change to 80

  server_name localhost;

 

  #charset koi8-r;

 

  #access_log logs/host.access.log main;

 

 

  location / {

   root /Users/xxx/ideaProjects/webtest/dist;

   index index.html;

    

   # This is used to handle the rewriting problem when Vue, Angular, and React use H5's History if (!-e $request_filename) {

    rewrite ^(.*) /index.html last;

    break;

   }

  }

 

 

  #Proxy server interface location /api/ {

   proxy_pass http://localhost:8080/;# proxy interface address}

test

The front end sends a request: http://localhost/test, vue-router redirects it to http://localhost/api/demo/1, and the actual access is http://localhost:8080/demo/1.

Send a request directly to the backend: visit http://localhost/api/demo/1, the actual access is: http://localhost:8080/demo/1

Content expansion thinking:

1).
# Proxy server interface

location /api/ {
proxy_pass http://localhost:8080/;# proxy interface address}

The proxy interface address only reaches 8080, so it will automatically add the name of the background project? ? ? For example, the interface is http://148.70.110.87:8080/project name/method name. . .

2). The request is made in .js. Nginx is configured as above, but the request fails with http://148.70.110.87/api/index2 404 (Not Found)

axios.post('/api/index2')
.then( (response) => {
console.log(response);
})
.catch( (error)=> {
console.log(error);
});

3). I really don't understand your third step, testing. It would be great if you could provide relevant code.