一、在前端进行
方法1：在axios访问时加上访问头，例子：
<template>
<div>
<div>
<!-- 头像区域 -->
<div class="text-center avatar-box">
<img src="../assets/logo.png" class="img-thumbnail avatar" alt="">
</div>
<!-- 表单区域 -->
<div class="form-login p-4">
<!-- 登录名称 -->
<div class="form-group form-inline">
<label for="username">登录名称</label>
<input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username" >
</div>
<!-- 登录密码 -->
<div class="form-group form-inline">
<label for="password">登录密码</label>
<input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password">
</div>
<div class="form-group form-inline d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
<button type="button" class="btn btn-primary mr-2" @click="register">注册</button>
<button type="button" class="btn btn-primary" @click="login">登录</button>
</div>
<div class="form-group form-inline d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-2" @click="email">邮箱注册</button>
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
import qs from 'qs'
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
export default {
name: 'MyLogin',
data(){
return{
username:'',
password:''
}
},
methods:{
reset(){
this.password=''
this.username=''
},
async login(){
const data={name:this.username,password:this.password}
const {data:res} = await axios({
method:'post',
url:'http://127.0.0.1:8080/api/login',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
data:qs.stringify(data)
})
console.log(res)
if(res.status===0){
localStorage.setItem('token',res.token)
await this.$router.push('/home')
}
},
async register() {
const data={name:this.username,password:this.password}
const { data:res} = await axios({
method:'post',
headers: { 'content-type': 'application/x-www-form-urlencoded' },
url:'http://127.0.0.1:8080/api/register',
data:qs.stringify(data)
})
console.log(res)
if(res.state===0){
await this.login()
}
},
email(){
this.$router.push('/emailRegister')
}
}
}
</script>
<style scoped>
.login-container {
background-color: #35495e;
height: 100%;
.login-box {
width: 400px;
height: 250px;
background-color: #fff;
border-radius: 3px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
.form-login {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-sizing: border-box;
}
}
}
.form-control {
flex: 1;
}
.avatar-box {
position: absolute;
width: 100%;
top: -65px;
left: 0;
.avatar {
width: 120px;
height: 120px;
border-radius: 50% !important;
box-shadow: 0 0 6px #efefef;
}
}
</style>
方法2：在vue.config.js中加入proxy代理，例子：
const path = require('path')
let proxyObj = {}
proxyObj['/'] = {
ws: false,
//请求后台接口如.env.dev中设置为：VUE_APP_INTERFACE_URL="http://vtp:9999/"
target: process.env.VUE_APP_INTERFACE_URL,
changeOrigin: true, // 允许跨域
pathReWrite: {
'^/': '/'
}
}
module.exports = {
// 部署生产环境和开发环境下的URL。
// 默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上
// 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。
// 例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
publicPath: '/admin',
// 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
productionSourceMap: false,
// webpack-dev-server 相关配置
devServer: {
// host: '0.0.0.0', // 可以忽略不写
port: 8081, // 它是用来修改你打开后的端口号的
open: true, // 值为 true的话，项目启动时自动打开到浏览器里边，false不会打开
proxy: proxyObj, //见上面
}
}
方法3：利用jsonp解决，例子链接。
二、在后端进行
需要在tp6的api的控制器被调用的php文件中，设置请求头部header('Access-Control-Allow-Origin: *')，如图，例子链接。
