Vue project deployment server cross-domain processing (nginx)

Preface

I encountered this problem when I was working on a project recently. Although the information I found on the Internet was detailed but not mentioned in some places, it took a day to find out my own problem. Record it here. The service I use is NGINX, and apache is not tested again.

text

The vue project was packaged and threw it on the server, and then I was surprised to find that none of the backend interfaces connected to it worked perfectly locally and failed to obtain data. After checking the code for countless times and Baidu, it was a long time before I realized that it was the local runtime node. Help us achieve cross-domain, and cross-domain in the server needs to be reconfigured.
No more nonsense, let me talk about my approach:
first enter the nginx directory folder ->conf->nginx.conf

server {
    
    
        listen       80;
        server_name  hostname

        location / {
    
    
            #你服务器的地址,后面接上要打开端口,我的是79
	        proxy_pass http://127.0.0.1:79
        }
		location /api/ {
    
    
			#你要配置跨域的服务器地址
			proxy_pass http://127.0.0.1/;
		}
    }

listen is the listening interface. If the following server is also opened on interface 80, it will report an error, and then write a location, followed by the cross-domain api name you set locally, so that after setting it in Alibaba Cloud or Tencent Cloud The console allows you to port 80 and 79, restart the nginx service, you will find that you have successfully connected to your back-end interface.
At that time, I also encountered a pit, that is, the'/' after the address of the cross-domain configuration. If it is not written, it will add api after the address, which is your cross-domain name, otherwise there will be no.

Guess you like

Origin blog.csdn.net/qq_43511063/article/details/108092284