nginx设置代理解决跨域问题

vue工程 npm run build 后把dist包放到 nginx代理服务器的html目录,在conf/nginx.conf配置文件中增加配置,这样就可以正常方位后端接口了,配置如下:

javascript 复制代码
server {
    listen  8193;
    server_name  localhost 127.0.0.1;
    location / {
        root D:\agent\html;
        index  index.html  index.htm;
    }
}

vue工程中 配置后端IP地址如下:

javascript 复制代码
const instance = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? '/api' : '192.168.1.128:8185',
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})

在浏览器中输入 localhost:8193 打开前端网页,但出现了后端接口请求跨域问题。原因是localhost:8193 和发送的后端请求192.168.1.128:8185 IP 和 端口都不同,所以出现了跨域。

我们在nginx上配置转发就可以解决此跨域问题,修改步骤如下:

  1. 在nginx代理服务器配置文件中配置上转发,配置如下:
javascript 复制代码
server {
    listen  8193;
    server_name  localhost 127.0.0.1;
    location / {
        root D:\agent\html;
        index  index.html  index.htm;
    }

    location /file/get {
        proxy_pass 192.168.1.128:8151;
    }
}

发送后端接口/file/get 会被转发到后端192.168.1.128:8151

  1. 修改vue工程中的后端接口地址 和 打开前端页面的地址相同,如下所示:
javascript 复制代码
const instance = axios.create({
    baseURL: process.env.NODE_ENV === 'development' ? '/api' : 'localhost:8193',
    timeout: 10000,
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    }
})

这样打开前端网页的地址和请求后端接口的地址相同,浏览器就不会报跨域请求错误了。而接口通过nginx 又被转发到正确的后端接口地址,所以接口就能正常访问了。

相关推荐
序属秋秋秋1 小时前
《Linux系统编程之入门基础》【Linux基础 理论+命令】(上)
linux·运维·服务器·ubuntu·centos·命令模式
知白守黑2673 小时前
docker资源限制
运维·docker·容器
霍格沃兹测试开发学社测试人社区3 小时前
新手指南:通过 Playwright MCP Server 为 AI Agent 实现浏览器自动化能力
运维·人工智能·自动化
ximy13354 小时前
AI服务器工作之服务器的种类分类
运维·服务器
恒创科技HK4 小时前
香港服务器CPU中E5和Gold的区别
运维·服务器
Wang's Blog7 小时前
Linux小课堂: 文件操作警惕高危删除命令与深入文件链接机制
linux·运维·服务器
2501_915909068 小时前
iOS 混淆实战,多工具组合完成 IPA 混淆与加固(源码 + 成品 + 运维一体化方案)
android·运维·ios·小程序·uni-app·iphone·webview
我科绝伦(Huanhuan Zhou)8 小时前
分享一个可以一键制作在线yum源的脚本
linux·运维
爱宇阳9 小时前
禅道社区版 Docker Compose 服务迁移教程
运维·docker·容器
Paper_Love9 小时前
Linux-查看硬件接口软件占用
linux·运维·服务器