Nodejs VUE 前后端分离两个问题

发布于 1周前 作者 songsunli 来自 nodejs/Nestjs

Nodejs VUE 前后端分离两个问题

我现在项目，前端使用 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')

怎么才能解决呢？


Harmonyos Next教程
33 回复

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.


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

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

不行的，要发送 cookie

可以考虑 nginx 转发

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

build 后背景图片没了

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

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.

登录后记得刷新页面

axios.defaults.baseURL = ‘http://localhost:8088’;

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

我改了啊，没用啊
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’)

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

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

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

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

为什么进来变成黑色的了

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

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

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

改了后给个个 warning

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

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 的值改成""
就可以了

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

亲测可行

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

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

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

我那个背景图片地址是个 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;
}

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

背景图片无法显示啊

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

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

针对Node.js与Vue前后端分离的两个问题，以下给出专业解答：

问题一：前后端分离的实现原理

前后端分离的实现原理在于前端（Vue）负责页面渲染和交互，后端（Node.js）负责数据处理和API接口提供。前端通过HTTP请求与后端进行通信，后端接收到请求后处理数据并返回结果。

以下是一个简单的示例：

  • Node.js后端：使用Express框架搭建服务器，定义一个API接口。
const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from Node.js!' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
  • Vue前端：使用axios发送HTTP请求调用后端接口。
import axios from 'axios';

axios.get('/api/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

问题二：前后端分离的优缺点

  • 优点：提高开发效率，便于团队协作，增强系统的可扩展性。
  • 缺点：可能增加请求数量，需要加强API的安全性设计，文档管理需完善，可能遇到网络延迟和跨域问题。

综上所述，Node.js与Vue前后端分离是一种高效的开发模式，但需注意解决其带来的挑战。

回到顶部