VUE 前后端分离两个问题

[SlipStupig]

我现在项目，前端使用 vue 做页面，后端使用 python

1. npm run build 后无法显示背景图片（背景图片使用 CSS 写在模板的style标签里面的）

2.使用 axio 请求后端无法将 cookie 设置到浏览器，网上看了一圈方法都不行，withCredentials=true也设置了，但是提示我错误

Failed to load http://localhost:8088/g: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8088' that is not equal to the supplied origin. Origin 'http://localhost:8080' is therefore not allowed access.

后端设置：

        self.set_header('Access-Control-Allow-Credentials', True)
        self.set_header("Access-Control-Allow-Origin", "http://localhost:8088")
        self.set_header("Access-Control-Allow-Headers", "x-requested-with")
        self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')

怎么才能解决呢？

[greatonce]

Failed to load http://localhost:8088/g: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:8088' that is not equal to the supplied origin. Origin 'http://localhost:8080' is therefore not allowed access.

self.set_header("Access-Control-Allow-Origin", "http://localhost:8088")


你用 8080 访问，设置的是 8088 当然不允许访问
Origin 'http://localhost:8080' is therefore not allowed access.

[ooTwToo]

哈哈哈，楼上真相了，不过你本地可以 Origin 为 * 呀

[SlipStupig]

@greatonce 我改了之后,后端依然收不到 cookie

[SlipStupig]

@ooTwToo 不行的，要发送 cookie

[TabGre]

可以考虑 nginx 转发

[arfaWong]

开发环境可以用 webpack 的 proxyTable 将请求转发到后端
生产环境使用 nginx 将请求转发到后端

[SlipStupig]

@arfaWong build 后背景图片没了

[guoyang]

1.首先 CORS，你的方案是没有错的，并且你的头如 1 楼所说 origin 要设置正确；
2.建议你现在 http://www.test-cors.org/中调通 CORS 的跨站测试；
3.前端也要开启 Credentials，VUE 的设置大概如下
import axios from 'axios'
Vue.prototype.$http.defaults.withCredentials = true

[SlipStupig]

@guoyang cors 已经设置正确了，vue cert 我也设置了，目前依然报错：

Failed to load http://localhost:8088/a: Redirect from 'http://localhost:8088/a' to 'http://localhost:8088/?next=%2Fa' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

[twotiger]

登录后记得刷新页面

[rsl140]

axios.defaults.baseURL = 'http://localhost:8088';

[qiuyk]

@SlipStupig 哥你这端口还是没改呀哈哈哈

[SlipStupig]

@qiuyk 我改了啊，没用啊
self.set_header('Access-Control-Allow-Credentials', 'true')
self.set_header("Access-Control-Allow-Origin", "http://localhost:8080")
self.set_header("Access-Control-Allow-Headers", "x-requested-with")
self.set_header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS')

[MaxBear]

跨域了，用 node 代理一下
可以参考 http://www.bear777.com/blog/vue-vue-axios-vue-resource-vue

[favicon]

webpack 的 proxyTable 里添加 cookieDomainRewrite: "localhost:8080" 不用谢

[jeremaihloo]

webpack 的 proxyTable 呀，楼上很多人都说了

[robinlovemaggie]

前后端分离为啥不考虑用 Token 做 Authrization?

[469054193]

为什么进来变成黑色的了

[Terry05]

这里怎么成全黑了，看着好难受

[changkong]

css 图片路径的问题，vue-cli 是在 build->utils.js 里的`ExtractTextPlugin`改下`publicPath`,
```
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', //注意: 此处根据路径, 自动更改
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
```