2018-02-04-跨域问题整理

跨域问题是前后端分离应用常见问题，解决的方案有很多，从开发阶段到上线后的生产环境
均需要解决该问题，

方案一：JSONP

• 这个比较常见，但仅适用于GET请求。

  jsonp原理：jsonp,即json+padding,动态创建script标签,利用script标签的src属性可以获取任何域下的js脚本,通过这个特性(也可以说漏洞),服
  务器端不在返货json格式,而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域.

方案二、apache反向代理

• 网上资料太多，自行查找。

方案三、nginx方向代理

一、下载

官网下载nginx

建议选择稳定版本

二、安装运行

1、将下载的nginx 解压放置在一个没有中文的路径下(这点很重要)

2、修改 conf/nginx.conf 中的端口号，设置listen 8888，避免与其他服务端口冲突。

3、双击nginx.exe （可能直接闪退），或者cd到安装路径，输入nginx

4、打开浏览器输入http://localhost:8888/ 查看服务是否成功运行

三、反向代理配置

https://www.cnblogs.com/anruy/p/4989161.html

https://www.cnblogs.com/Miss-mickey/p/6734831.html

https://www.cnblogs.com/xingzc/p/5753030.html

方案四、前后端分离

五、webpack代理设置

• 如下设置，附带cookie丢失问题，如果每次请求会重新携带不同的cookie时可以用到。

webpack proxyTable

var sessionId = ''

module.exports = {
// add by yixuanz 代理设置 2017-12-20 14:00:49
    proxyTable: {
      '/api': {
        target: 'http://88.88.88:110/controller',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },

        // 解决登录后，cookie丢失。 start
        // PS: 正常情况无需设置以下代码，若出现接口无法获取请求头部的cookie则可参考
        cookieDomainRewrite: 'localhost',
        onProxyReq: function (proxyReq, req, res) {
          proxyReq.setHeader('Cookie', sessionId)
        },
        onProxyRes: function (proxyRes, req, res) {
          let existingCookies = proxyRes.headers['set-cookie'],
            rewrittenCookies = []
          if (existingCookies !== undefined) {
            if (!Array.isArray(existingCookies)) {
              existingCookies = [existingCookies]
            }

            for (let i = 0; i < existingCookies.length; i++) {
              rewrittenCookies.push(existingCookies[i].replace(/;\s*?(Secure)/i, ''))
            }
            sessionId = rewrittenCookies[rewrittenCookies.length - 1]
            proxyRes.headers['set-cookie'] = rewrittenCookies
          }
        }
      }
    },
    ...
    // 解决登录后，cookie丢失。 end
}