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

7 篇文章 0 订阅

前言

最近在做项目时候遇到了这个问题,网上找到的资料虽然详细但有些地方没提到,花费了一天的时间发现了我自己的问题,在这记录一下。我用的服务是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也就是你的跨域名字,否则没有。

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值