vue axios + Java 跨域

女爷i 2022-01-22 00:45 330阅读 0赞

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;  
    \}  
\}