Nginx 代理静态资源,解决跨域问题

背景:移动端 H5 项目,依赖了一个外部的 JS 文件。访问时,出现跨域,导致请求被 block。

  • 当前域名:https://tmcopss.test.com
  • 要访问的 JS 文件:https://tm.test.com/public/scripts/y-jssdk.js

image.png
解决办法

  • 方案 1:支持跨域请求。 将目标域名(https://tm.test.com)加上 Access-Control-Allow-Origin 响应头即可。但是这个域名我们无法控制,没法添加支持跨域的 Header。
  • 方案 2:不跨域,使用 Nginx 代理。

目标:使用 Nginx 代理外部静态资源,解决跨域请求问题。
在 nginx 配置文件中,添加如下代理配置:

location /public/scripts/y-jssdk.js {
  proxy_pass https://tm.test.com/public/scripts/y-jssdk.js;
}

这样,即可通过 https://tmcopss.test.com/public/scripts/y-jssdk.js 访问到 https://tm.test.com/public/scripts/y-jssdk.js 这个 JS 文件了。
Nginx 代理静态资源,解决跨域问题_第1张图片

你可能感兴趣的:(项目中的那些事,nginx,跨域,nginx同源,nginx跨域)