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')

怎么才能解决呢？

[yanqing07]

你收不到 cookie。也可能是 vue 的 ajax 发送时，没带 cookie。不一定是 py 的锅

[SlipStupig]

@changkong 改了后给个个 warning

Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.

[vivinBear]

main.js
Axios.defaults.withCredentials = true

build/utils.js

if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' /// 加上这一行
})
} else {
return ['vue-style-loader'].concat(loaders)
}

config/index.js
把 build 的 assetsPublicPath 的值改成""
就可以了

[vivinBear]

@SlipStupig 看我上面的,你的这些问题我都遇到过,并且都解决了

[vivinBear]

亲测可行

[moxiaonai]

楼上正解。样式问题是编译后的路径不对

跨域问题，服务端设置 cors。'Access-Control-Allow-Origin'必须为具体域名，不能为*。
前端 Axios.defaults.withCredentials = true，也必须允许接收跨域的 cookie

[SlipStupig]

@vivinBear 能留个联系方式不，我还是没解决

[SlipStupig]

@vivinBear 我那个背景图片地址是个 BASE64 编码地址：url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTE3MUZDMzc2OUQwMTFFMzg3RkNENUMxREE0MjcxMzciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTE3MUZDMzY2OUQwMTFFMzg3RkNENUMxREE0MjcxMzciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE2OUUxRDlFNkZGMTExRTFBQjBCODVFNEE2MzdFRDhGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkY1QTRERkEwNkZGMTExRTFBQjBCODVFNEE2MzdFRDhGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5Xmx/AAAAF5JREFUeNrsztsJgFAMwNDWFyIiCOL+m1aXEOM1gfyfjIgzwOX9QQfudOBGB6504EIHznTgRAeOdOAgsHVgL1Dgy8BOoECBAp8FpkCBAj8MtObLqhIoUKDAPwMvAQYAhqcYrJBlYv8AAAAASUVORK5CYII=)，跟我设置的完全不一样。我的配置

build/utils.js：
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../' /// 加上这一行
})
} else {
return ['vue-style-loader'].concat(loaders)
}

config/index.js:
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: "",

/**
* Source Maps
*/

productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',

// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],

// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}

CSS:
body {
height: 100%;
width: 100%;
position: fixed;
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
background: url('../assets/login_bg.jpg') no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

[vivinBear]

@SlipStupig 那这个就和前端没什么关系了吧,你现在还有什么问题,把错误贴出来

[SlipStupig]

@vivinBear 背景图片无法显示啊

[vivinBear]

@SlipStupig 你给我个联系方式,然后我试着帮你看看

[v2gg]

@SlipStupig build 之后显示不出来可以 F12 看看是什么原因，可能是相对路径的锅