nginx反向代理解决跨域前端实践

需求实现

  • 本地请求百度的一个搜索接口,用nginx代理解决跨域
  • 思路:前端和后端都用nginx代理到同一个地址8080,这样访问接口就不存在跨域限制

本地页面

index.js

复制代码
const path = '/s?ie=utf-8&mod=1&isbd=1&isid=32E40E4954198269&ie=utf-8&f=8&rsv_bp=1&rsv_idx=2&tn=baidutop10&wd=%E9%98%BF%E9%87%8C%E8%BE%BE%E6%91%A9%E9%99%A2%E8%A3%81%E6%92%A4%E9%87%8F%E5%AD%90%E5%AE%9E%E9%AA%8C%E5%AE%A4&oq=%25E9%2598%25BF%25E9%2587%258C%25E8%25BE%25BE%25E6%2591%25A9%25E9%2599%25A2%25E8%25A3%2581%25E6%2592%25A4%25E9%2587%258F%25E5%25AD%2590%25E5%25AE%259E%25E9%25AA%258C%25E5%25AE%25A4&rsv_pq=aa3000c700059c97&rsv_t=dc43G%2B%2BXaqAS56%2B0UrBoDRNzBFYzNO23OT7ktw83SdWrOCxFOH0i2bYVSOJvWtCQCg&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=t&bs=%E9%98%BF%E9%87%8C%E8%BE%BE%E6%91%A9%E9%99%A2%E8%A3%81%E6%92%A4%E9%87%8F%E5%AD%90%E5%AE%9E%E9%AA%8C%E5%AE%A4&rsv_sid=undefined&_ss=1&clist=&hsug=&f4s=1&csor=0&_cr1=45968';

function testNginxFetch() {
  fetch(`https://www.baidu.com${path}`).then(res => {
    console.log(res, 'res');
  })
}

testNginxFetch()
  • 不出意外的会报cors错误

修改nginx配置文件

  • mac地址:/usr/local/etc/nginx/nginx.conf
  • windows地址示例:D:\nginx-1.16.0\conf\nginx.conf

nginx.conf

复制代码
server {
	# 监听端口
    listen 8080;

	location / {
			# 以/开头的请求会被代理到8080
            proxy_pass http://localhost:8035;
    }
    location /s {
    	  # 以/s开头的请求也会被代理到8080
          proxy_pass https://www.baidu.com;
    }
}

index.js

复制代码
// 修改请求url,删除域名前缀
fetch(path).then(res => {
    console.log(res, 'res');
})

启动nginx

复制代码
● mac 命令

sudo nginx // 启动
sudo nginx -s stop // 停止
sudo nginx -s reload // 重新加载
----------------------------------------
● windows 命令(cmd 进入Nginx解压目录 执行以下命令)

启动Nginx:start nginx
快速停止或关闭Nginx:nginx -s stop
正常停止或关闭Nginx:nginx -s quit
配置文件修改重装载命令:nginx -s reload
  • mac上启动
    cmd输入命令:sudo nginx
  • windows上启动
    cmd输入命令:start nginx

打开localhost:8080查看结果

  • 可以看到前后端都运行在8080服务器,且百度的接口成功响应

相关推荐
viqecel7 小时前
网站改版html页面 NGINX 借用伪静态和PHP脚本 实现301重定向跳转
nginx·php·nginx重定向·301重定向·html页面重定向
硪就是硪11 小时前
内网环境将nginx的http改完https访问
nginx·http·https
ak啊12 小时前
Nginx 安全加固详细配置指南
nginx
沐土Arvin1 天前
Nginx 核心配置详解与性能优化最佳实践
运维·开发语言·前端·nginx·性能优化
haoranyyy1 天前
mac环境中Nginx安装使用 反向代理
linux·服务器·nginx
ak啊1 天前
Nginx 高级缓存配置与优化
nginx
再学一丢丢2 天前
Keepalived+LVS+nginx高可用架构
nginx·架构·lvs
xujiangyan_2 天前
nginx的自动跳转https
服务器·nginx·https
tingting01192 天前
k8s 1.30 安装ingress-nginx
nginx·容器·kubernetes
残花月伴2 天前
linux详细安装/配置(mysql/nginx/tomcat)
linux·mysql·nginx