2
  1. 技术栈为:webpack+vue+express,程序直接在开发环境下运行没有问题。然后打算将前后端代码分离,并将项目配置到生产环境下,所以webpack直接打包到dist目录下,然后将index.html和static目录放到了nginx的静态目录中,访问: http://localhost ,可以看到登录界面,但是执行登录却发出了一条options请求,并返回了204 No Content。
  2. 问题是:为什么没有出现登录的post请求,而只有options请求?如何处理这种前后端分离的跨域问题。
  3. 已有的处理:前端使用的axios网络库,并已经加入了 axios.defaults.withCredentials = true; ;后端使用了cors库,代码为:app.use(cors({credentials: true}));
  4. 问题截图如下:图片描述
alsowen 37
2018-05-15 提问
2 个回答
0

已采纳

自己更新下。
webpack跨域的问题已解决。
解决方案:前端axios部分必须在axios引入的地方开启 axios.defaults.withCredentials = true;
后端部分没有使用vue-cli推荐的proxyTable方案,而使用了cors库

cors具体配置为:

app.use(cors({
    origin: 'http://127.0.0.1', //webpack打包后会生成index.html和static目录,我直接放在本地启动的nginx静态目录html下用来运行webpack打包文件,所以Origin地址为http://127.0.0.1 
    allowedHeaders: 'Origin, x-requested-with, Content-Type, X-Token', //X-Token为自定义的头字段
    credentials: true //设置成true 请求中才会带上cookie信息,否则请求失败
}));
1

204 是正常的。OPTIONS 返回 200 和 204 都是通过。至于为什么 POST 没发出来就不清楚了…看看有没有报错吧。

补充

如何处理前后端分离开发时的跨域问题:
使用 webpack 配置中的 devServer.proxy 进行代理,比如:

proxy: {
  '/api': {
    target: 'http://example.com'
  }
}


axios('/api/users') // 在检查器里看到发送给 localhost/api/users,实际发送给 example.com/api/users

撰写答案

推广链接