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服务器,且百度的接口成功响应

相关推荐
Sonetto19999 小时前
Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
运维·前端·nginx
白总Server1 天前
Nginx 中间件
大数据·linux·运维·服务器·nginx·bash·web
异常君1 天前
HTTP头中的Accept-Encoding与Content-Encoding深度剖析
后端·nginx·http
生命有所坚持而生存可以随遇而安1 天前
https nginx 负载均衡配置
服务器·nginx·负载均衡
Python私教1 天前
CentOS 7 基于 Nginx 的 HTML 部署全流程指南
nginx·centos·html
万水千山走遍TML2 天前
JavaScript性能优化
开发语言·前端·javascript·性能优化·js·js性能
五号厂房2 天前
客户端收到413 Request Entity Too Large错误该如何解决?
nginx
大胆刁民2 天前
nginx
nginx
王者鳜錸2 天前
2024从Maven-MySQL-Nginx部署
mysql·nginx·maven
中国lanwp2 天前
Pingora vs. Nginx vs. 其他主流代理服务器性能对比
运维·nginx