Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.