nuxtJs跨域

新建一个nuxt项目

创建nuxt-test

 

命令：npx create-nuxt-app nuxt-test

 

启动项目

 

进入项目： cd nuxt-test

启动项目： npm run dev

 

 

浏览器预览项目

 

 

使用element-ui创建注册页面

布局代码

 

<el-form

:model="ruleForm"

status-icon

ref="ruleForm"

label-width="100px"

class="demo-ruleForm"

> 

<!-- 账号 -->

<el-form-item label="账号" prop="pass">

<el-input type="text" v-model="ruleForm.account" autocomplete="off"></el-input>

</el-form-item>

 

<!-- 密码 -->

<el-form-item label="密码" prop="pass">

<el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>

</el-form-item>

<!-- 用户组 -->

<el-form-item label="用户组" prop="region">

<el-select v-model="ruleForm.userGroup" placeholder="请选择用户组">

<el-option label="普通用户" value="普通用户"></el-option>

<el-option label="超级用户" value="超级用户"></el-option>

<el-option label="至尊用户" value="至尊用户"></el-option>

</el-select>

</el-form-item>

<!-- 注册按钮 -->

<el-form-item>

<el-button type="primary">提交</el-button>

</el-form-item>

</el-form>

 

 

 

布局效果

创建express服务器

创建nuxt-server服务器

 

创建命令： express -e nuxt-server

 

修改服务器端口号

 

//在app.js文件中暴露对象之前

app.listen(9527, () => {

console.log(`服务器已启动...`);

})

 

 

修改启动项

 

//在package.json中修改start命令

"scripts": {

"start": "nodemon app"

},

 

启动项目

 

启动项目： npm start

 

mysql作为数据库

安装mysql

 

安装命令： npm i mysql

 

 

链接mysql

 

//conn.js中

var mysql = require('mysql');

var connection = mysql.createConnection({

host : 'localhost',

user : 'root',

password : 'root',

database : 'nuxt'

});

connection.connect();

 

module.exports.conn = connection

 

 

路由文件引入conn并使用

 

const conn = require('./db/conn')

conn.query(sql, (err, data) => {

        if (err) throw err;

        if (data.affectedRows > 0) {

            //注册成功

            res.send({

                code: 0,

                msg: '注册成功'

            })

        } else {

            //注册失败

            res.send({

                code: 1,

                msg: '注册失败'

            })

        }

    })

 

 

发送axios请求

在页面中输入数据并发送axios请求

 

methods: {

submitForm(){

this.$axios.post('http://127.0.0.1/users/addaccount', {

params: this.ruleForm

})

}

}

 

 

发送后出现了跨域问题

 

Nuxt解决跨域访问

配置nuxt代理

安装@nuxt/proxy模块

 

安装命令： npm i @nuxt/proxy --save

 

 

在nuxt.config.js配置proxy

/*

** Nuxt.js modules

*/

modules: [

// Doc: https://axios.nuxtjs.org/usage

'@nuxtjs/axios',

'@nuxtjs/proxy' //添加proxy模块

],

/*

** Axios module configuration

*/

axios: {

proxy: true // 开启proxy

},

proxy: [ //proxy配置

['/api', {

target: 'http://127.0.0.1:9527', //api请求路径

pathRewrite: { '^/api': '/' } //重定向请求路径，防止路由、api路径的冲突

}]

],