node+Vue小项目前端小白踩坑日记-1最近在跟着B站的视频教程学习Vue，写了几个简单的数据接口。我的前后端都是

最近在跟着B站的视频教程学习Vue。本来一切都很顺利，直到我发现老师给的接口基本都失效了···所以又学了下node，写了几个简单的数据接口。

我的前后端都是运行在localhost环境下的。由于浏览器的同源策略问题，前端请求后端接口时，很自然地就出现了跨域问题。跨域.png

我了解到的跨域解决方案有两种。

方案一：在后端设置

如下，在node项目的app.js中添加如下代码。

app.all("*", function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*"); //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Headers", "content-type"); //允许的header类型
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS"); //跨域允许的请求方式
    if (req.method.toLowerCase() == 'options')
        res.send(200); //让options尝试请求快速结束
    else
        next();
});

方案二：前端配置vue.config.js

此方法利用的是proxy的原理。大概过程是：1、请求发出后，会先送达代理服务器地址 -> 2、再由代理服务器去请求真正的服务器。

vue.config.js文件内容：

module.exports = {
    devServer: {
        proxy: { 
            '/api': {
                target: 'http://localhost:3000',  //你的后端服务地址
                ws: true,
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

http.js文件内容：（这个文件对axios请求进行了封装，方便后续维护）

import axios from "axios";
const request=axios.create({
	baseURL:'/api'
})
export default request;

import request from '../http.js'
methods:{
    async test(){
        const {data:res}=await request.get('/user/test')
        console.log(res)
    }
}

按理说，按照以上步骤配置完成后，我的test方法一执行，请求就会被发送到http://localhost:8080/api/user/test （Vue项目的运行地址 + /api + /user/test）这个地址，然后请求会被转发到http://localhost:3000/user/test ,然后控制台会打印出接口返回的数据。

but...

我一顿操作敲完，ctrl+s后，终端发生了以下报错。

  ERROR  ValidationError: Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

搜狗截图20220411223156.png

世界上最可怕的事情，大概就是看不懂报错···

我一开始觉得，会不会是因为我用的是Vue2，2不支持配置proxy？然后翻了下别人的博客，发现只要vue-cli3以上就能用。然后我又东改西改了一下，发现我的vue.config.js中，多了一行这个代码：

搜狗截图20220411224205.png

删掉它之后，终端终于清静了。接口数据也能正常过来了。

2021-07-02 221259.jpg

but一个合格的学习人不应该止步于此!!!

因为我只学了vue2，所以我又很自然地想：这会不会是vue3的什么配置。所以我就打开了vue，想去查查这到底是个啥。

然后，我就没搜到···

然后我又打开了vue-cli官网和百度，还是没查到这句到底什么作用。==

等我把Vue3文档看完了再来更新一下，这到底是个啥。

node+Vue小项目 前端小白踩坑日记-1

node+Vue小项目前端小白踩坑日记-1