How to solve Cross-domain problems with nginx

This article will explain in detail how to use nginx to solve cross-domain problems. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

1. Package the front-end code:

Npm run build

A dist folder is generated. Contains an index.html file and a static folder, with my local path as an example:

/ Users/xxx/ideaProjects/webtest/dist

2. Open

Add the nginx.conf under / usr/local/etc/nginx directory to server as follows:

Listen 80; # originally 8080, to avoid conflicts, changed 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 deal with Vue, Angular, React overridden when using H5 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 the request: http://localhost/test, which is redirected to http://localhost/api/demo/1 by vue-router, and the actual access is http://localhost:8080/demo/1.

Send the request directly to the backend: access http://localhost/api/demo/1. The actual access is: http://localhost:8080/demo/1

Thinking about content expansion:

1)。

# proxy server interface

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

If the address of the proxy interface is only up to 8080, then he will automatically add the name of the background project. For example, the interface is the http://148.70.110.87:8080/ project name / method name.

2). This is the request in js. Nginx is in accordance with your above configuration, but the request error http://148.70.110.87/api/index2 404 (Not Found)

Axios.post ('/ api/index2') .then ((response) = > {console.log (response);}) .catch ((error) = > {console.log (error);}). This is enough about how to use nginx to solve cross-domain problems. I hope the above can be helpful and learn more. If you think the article is good, you can share it for more people to see.