首先我是一个Java程序员,近来想写前端就自学了vue。关于前后端分离前端请求跨域问题记录下来,以供大家参考。
先写了个后端接口
非常简单的前端调用的测试接口:
@GetMapping("/userLogin/{username}/{password}")
public String login(@PathVariable("username") String username, @PathVariable("password") String password){
log.info(username+"---"+password);
return username+"-"+password;
}
由于前端刚接触研究的时间比较多:
首先项目前端入口main.js
import apiConfig from '../config/api.config'
import Vue from 'vue'
import index from './index'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = apiConfig.baseUrl // 配置默认发送请求到http://127.0.0.1:8888,可改或者加端口号 为了动态获取
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { index },
template: '<index/>'
})
这个main.js中导入了一个新建的api.config.js文件
const isPro = Object.is(process.env.NODE_ENV, 'production') //生产环境
module.exports = {
baseUrl: isPro ? 'http://localhost:8888/api' : '/api' //这里配置 /api 在接口中就不用配置
}
最重要的就是配置代理:
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api/**': {
target: 'http://localhost:8888',//设置调用的接口域名和端口号(默认端口号80)
changeOrigin: true, //设置请求头
pathRewrite: { //路径重写
'^/api': '/'
}
//这里理解成用‘/api’代替target里面的地址,
//后面组件中我们掉接口时直接用api代替
//比如我要调用'http://40.00.100.100:3002/user/add',
//直接写‘/api/user/add’即可
}
},
最后写了一个get请求:
<template>
<div id="api">
<div id="login">
<div class="username" ><input v-model="username" placeholder="用户名"></div>
<div class="username"><input v-model="password" placeholder="密码"></div>
<button id="loginSumbit" @click="loginSumbit">登录</button>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
username: '',
password: ''
}
},
methods: {
loginSumbit(){
axios.get('/v1/userLogin/'+this.username+'/'+this.password,{ //在api.config.js中配置了 /api 这这里请求的时候就不用加 /api 了
}).then(data => {
console.log(data);
}).catch(error => {
console.log('请求失败:' + error);
})
}
}
}
</script>
请求成功!