vue项目部署服务器跨域处理(nginx)

前言

最近在做项目时候遇到了这个问题,网上找到的资料虽然详细但有些地方没提到,花费了一天的时间发现了我自己的问题,在这记录一下。我用的服务是NGINX,apache的没有再去测试。

正文

vue项目打包好后扔到服务器上,然后惊奇的发现在本地完美运行的连接到的后端接口一个也没有成功获取到数据,检查了无数次代码又百度好久之后才知道是本地运行时node已经帮我们实现了跨域,而在服务器中跨域需要重新配置。
不再说废话了,接下来的说一下我的处理方法:
首先进入nginx的目录文件夹->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是监听的接口,如果下面服务器也在80接口打开服务器就会报错,后面再写一个location,/后面接上你在本地设置跨域的api名字,这样设置好后在阿里云或腾讯云的控制台放行你的80和79端口,重启nginx服务,就会发现你已经成功连接上了你的后端接口。
当时还遇到了一个坑,就是配置跨域的地址后面的’/’,没有写他会在地址后加上api也就是你的跨域名字,否则没有。

猜你喜欢

转载自blog.csdn.net/qq_43511063/article/details/108092284