nginx解决前端跨域问题

什么是跨域？

同源策略

首先要了解什么是同源策略：

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。
所谓同源是指，域名，协议，端口相同。
当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面
当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，
即检查是否同源，只有和百度同源的脚本才会被执行。
如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

何为跨域

只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

解决跨域

常用的解决跨域的方法主要是JSONP、CORS、NGINX反向代理。本文只讲如何用nginx解决跨域。

例如我们要请求这个apihttps://api.douban.com/v2/movie/in_theaters?start=0&count=20

$.ajax({url: "https://api.douban.com/v2/movie/in_theaters?start=0&count=20"});

会提示跨域

Access to XMLHttpRequest at 'https://api.douban.com/v2/movie/in_theaters?start=0&count=20' from origin 'http://www.oyt.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

更改nginx配置

server {
  ...

  location /api/ {
    proxy_pass https://api.douban.com/;
  }
}

js代码修改如下

$.ajax({ url: "/api/v2/movie/in_theaters?start=0&count=20" });

微信头像生成海报无法生效问题

之前在搞生成海报的时候发现，如果海报上加上微信用户头像的时候，在微信开发者工具中可以正常生成canvas并且可以转换为图片。
但是在真机上往往会发现头像莫名其妙的消失了。这也是因为微信头像跨域的问题。

更改nginx配置

server {
  ...

  location /wxHeadImgUrl/ {
    proxy_pass http://thirdwx.qlogo.cn/;
  }
}

js代码如下

let headImgUrl = uinfo.headImgUrl;
headImgUrl = headImgUrl.replace("http://thirdwx.qlogo.cn/", "/wxHeadImgUrl/");