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
}