1.在 vue main.js 的 里面
import axios from 'axios'//引入axios,来发送请求
Vue.prototype.axios = axios //设置axios全局引用
axios.defaults.timeout = 5000;// 在超时前,所有请求都会等待 5 秒
// 配置请求头
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.baseURL = 'http://localhost:8080/jacktu';// 配置接口地址
axios.defaults.withCredentials = false;
2.在 Java 后端
一般情况:
// 指定允许其他域名访问
response.setHeader("Access-Control-Allow-Origin", "*");//此句是关键,其他不重要
// 响应类型
response.setHeader("Access-Control-Allow-Methods", "POST, GET, DELETE, OPTIONS, DELETE");
// 响应头设置
response.setHeader("Access-Control-Allow-Headers", "Content-Type, x-requested-with, X-Custom-Header, HaiYi-Access-Token");
如果你用的是 Spring 的话,使用 @CrossOrigin(origins = "*") 就可以
//@CrossOrigin("http://127.0.0.1:9090")
// * 是代表允许任何跨域
@CrossOrigin(origins = "*", maxAge = 3600)//就是这个注解
@Controller
@RequestMapping(value = "/zhaopin")
public class ZhaoPinController {
@Autowired
private ZhaoPinService service;
3.调用 写在 App.vue <script></script>里面的:
然后, 启动vue 项目 打开控制台
export default {
components:{
},
data(){
return{}
},
methods:{
},
//vue启动,会自动执行 mounted里面的代码
mounted() {
//这里面才是关键,其他都不重要
this.axios({
method: 'get',
url: '/test/test.do',//会自动添加main.js里面的配置
params: this.urlParams
}).then((res) => {
console.log(res)
console.log(res.data)
alert(res.data.msg)
}).catch((err) => {
console.log(err)
})
}
}
4.出现错误:
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
如果出现,类似这样的错误,则是由于 后端配置错误,检查后端.
5.最后,附上个人相关完整代码:
vue 里面的 main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import axios from 'axios'//引入axios,来发送请求
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.prototype.axios = axios
axios.defaults.timeout = 5000;// 在超时前,所有请求都会等待 5 秒
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';// 配置请求头
axios.defaults.baseURL = 'http://localhost:8080/jacktu';// 配置接口地址
axios.defaults.withCredentials = false;
new Vue({
el: '#app',
components: {App},
template: '<App/>'
// render: h => h(App)
})
vue 里面 App.vue
<template>
<div>
<el-menu></el-menu>
<el-table></el-table>
<br/>
<el-page></el-page>
</div>
</template>
<script>
import nav from "./components/NavMenu.vue"
import eletable from "./components/Table.vue"
import pageination from "./components/Pagination.vue"
export default {
components:{
ElMenu:nav,
ElTable:eletable,
ElPage:pageination
},
data(){
return{}
},
methods:{
},
mounted() {
this.axios({
method: 'get',
url: '/test/test.do',
params: this.urlParams
}).then((res) => {
console.log(res)
console.log(res.data)
alert(res.data.msg)
}).catch((err) => {
console.log(err)
})
}
}
</script>
Java 的 Controller 我使用的 是 Spring MVC 有Spring 就行:
package top.jacktu.page.controller;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
@RequestMapping("/test")
@CrossOrigin(origins = "*", maxAge = 3600)
public class TestController {
//http://localhost:8080/jacktu/test/test.do
@RequestMapping("/test")
@ResponseBody
public Map<String, Object> hello(HttpServletRequest request,HttpServletResponse response) {
HashMap<String, Object> map = new HashMap<>();
map.put("page", "jakctu's personal page");
map.put("msg", "你好");
return map;
}
}