Vue问题记录

最新推荐文章于 2022-08-23 11:15:00 发布

sinat_20623933

最新推荐文章于 2022-08-23 11:15:00 发布

阅读量491

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/sinat_20623933/article/details/60778711

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了Vue.js开发中遇到的一些常见问题及其解决办法，包括Vue警告信息、组件属性传递、图片路径配置错误及跨域请求问题，并提供了一个具体的跨域请求案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.[Vue warn]: Error in mounted hook:

在vue文件中的mounted方法中使用了this.items，但是在data() return 中没有写返回items,在data()中return中加入 items: [] 就没问题了

2.传boolean值给控件

3.图片路径问题

在同一个.vue文件中，在style中，路径是在这个vue相对img的路径的，在script中，图片路径是相对index.html

4.XMLHttpRequest cannot load http://localhost:3000/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 500.

之前get的时候是没有问题的，之后发现是post未接收到数据,导致请求出错。

请求的时候,使用queryString()

import axios from "axios"
var qs = require('qs');
  axios.post(global.API + path, qs.stringify({
                username: username,
                password: pwd
            }), {
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                }
            }).then((res) => {
                let {
                    data,
                    code
                } = res.data;

                if (code == 200) {
                //.......
                } else {
                //.......
                }
            }, (res) => {
                console.log(res.status);
            });

后台处理请求

var bodyParser=require('body-parser');

var app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.post("/login", (req, res) => {
    let name = req.body.username;
    let pwd = req.body.password;
    //.........
}