vue项目如何使用nginx配置跨域

在Vue项目中,遇到a.com.cn前端与b.com后端接口跨域问题。文章介绍了两种解决方法:一是让后端在返回数据时设置header,但此法不稳定性高;二是通过Nginx配置解决,具体操作包括登录服务器修改nginx配置并重启,同时在Vue项目中调整axios设置。详细步骤可见作者博客。
摘要由CSDN通过智能技术生成

最近使用vue开发一个功能,npm run build之后打包的代码放在了a.com.cn下但是php接口部署在了b.com下,那么问题来了,如何让后端接口支持跨域。有两种方法:

  1. 让后端在返回数据的时候设置下返回请求的header,这种方法比较不稳定,因为接口一旦多了就得改好多代码,而且每次出了问题还得去找后端开发改代码,很烦。

  2. 另一种方法是,自己配置nginx,首先ssh登录到部署接口所在的服务器,修改nginx配置,在http对象中加入两行代码:

http {
  // 需要加入的代码
  add_header Access-Control-Allow-Origin http://a.com.cn
  add_header Access-Control-Allow-Credentials true
  server {
    // b.com.cn的具体配置
  }
}

改完重启下nginx,然后在vue项目中,在导入axios的地方

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值