nginx部署前端静态代码解决本地接口调用跨域问题

本文详细介绍了Nginx的配置方法,包括如何设置监听端口、域名、代理头信息,以及解决运行时端口丢失的问题。同时,文中还分享了如何通过rewrite规则进行URL重写,并使用uwsgi_params和proxy_pass实现与后端服务的通信。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

server {
    listen 90;
    server_name localhost;

    #charset koi8-r;

    #access_log logs/host.access.log main;
    proxy_set_header Host $host:$server_port; //需要加上,解决运行时端口丢失问题
location / {
    root html;
    index index.html index.htm;
}
// 将 蓝色的 丢进去 改一下对应的

 

 //js内ajax请求的ip地址  如 localhost:8080/api/      改为   /apis/api   
location /apis {               
      rewrite ^.+apis/?(.*)$ /$1 break;
      include uwsgi_params;
                    proxy_pass http://localhost:8080;  //  需要调用的后台ip地址  
}

}

转载于:https://www.cnblogs.com/zylbock/p/10088217.html

### 解决 Nginx 部署前端项目时无法连接后端的问题 在使用 Nginx 部署前端项目并实现与后端通信的过程中,`proxy_pass` 是一种常用的方式。以下是针对该问题的具体解决方案: #### 1. 问题解决方法 当前端和后端运行在不同名或端口上时,浏览器会阻止请求。可以通过配置 Nginx 的 CORS 头部信息来解决问题。具体配置如下: ```nginx location /api/ { proxy_pass http://your_backend_url; add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; } ``` 上述配置实现了对 `/api/` 请求路径的反向代理,并设置了允许访问的相关头部信息[^1]。 #### 2. `proxy_pass` 的基本配置 为了使前端能够成功调用后端接口,需正确配置 `proxy_pass` 参数。以下是一个典型的例子: ```nginx server { listen 80; server_name localhost; location /frontend_app/ { root /usr/share/nginx/html; index index.html index.htm; } location /backend_api/ { proxy_pass http://backend_server_address/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 在此配置中,`/frontend_app/` 表示静态资源的根目录,而 `/backend_api/` 则用于转发到后端服务地址[^2]。 #### 3. URL 地址重写 如果需要调整请求路径或者映射特定的 API 接口,则可以利用 `rewrite` 指令完成 URL 地址重写操作。例如: ```nginx location /vehicle/permission { rewrite ^/vehicle/permission/(.*)$ /permission/$1 break; proxy_pass https://azz.qqv.com; } ``` 这段代码的作用是将匹配正则表达式的请求重新定位至目标 URI 并执行相应的代理传递动作。 #### 4. 安全性和性能优化建议 除了基础功能外,在实际生产环境中还需要注意安全防护以及效率提升等方面的内容。比如限定可接受的方法列表、启用缓存机制等措施均有助于增强系统的稳定性和可靠性[^3]。 ```python def test_proxy(): """ 测试函数模拟如何验证Nginx中的Proxy_Pass设置是否生效。 此处仅为示意用途,请根据实际情况编写测试逻辑。 """ import requests response = requests.get('http://localhost/frontend_app/') assert response.status_code == 200, "Frontend not accessible" backend_response = requests.post('http://localhost/backend_api/data', json={"key": "value"}) assert backend_response.ok and isinstance(backend_response.json(), dict), "Backend connection failed" if __name__ == "__main__": test_proxy() ``` 以上即为关于 Nginx 部署前端项目期间遇到无法正常链接后台情况下的处理办法及相关注意事项说明文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值