跨域问题的解决（CORS、Proxy、CSP问题）

本文主要是记录一下遇到的跨域问题，不再讲述常用的几种方法的原理，主要是记录解决实际开发中遇到的一些问题：

起初我在本地开发的时候，使用的CORS解决了跨域问题，因为本地调试过程虽然域名都是“localhost”，但是启用的端口号不一样，导致前端的数据请求出现了跨域问题，为了解决这个问题，我在服务端设置了响应头，保证了跨域问题的解决:

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

在我的项目正式上线后，我修改了允许通过的域名和端口号，解决了大部分资源的跨域问题，但是由于我的博文是由MD文档解析成HTML的，其中博文的图片是单独用img标签的src使用url进行图片的获取的。结果这个图片却因为CSP策略而无法加载，经过检查，我发现需要将响应标头中的：

Content-Security-Policy:default-src 'none' 

 设置为：

Content-Security-Policy: default-src 'self' 

 于是我新增了中间件用于改变请求CSP的模式：

app.use(function (req, res, next) {
  res.setHeader(
    'Content-Security-Policy', "default-src 'self'
  );

  next();
});

不过于事无补，后来我使用代理转发的策略，企图绕过CSP，于是设置了一个代理服务器的接口：

app.get('/proxy',(req,res)=>{
  const imageUrl = req.query.url
  request.get(imageUrl).pipe(res)
})

通过这种方式，确实管用，将获取到的url转发，返回一个真正的图片链接，实现了博文中的图片的加载，效果最终如下：