Vue設置

1、在項目根目錄創建文件vue.config.js

module.exports = {devServer: {proxy: {'/api': {target: 'http://zlf.plus', //對應自己的接口changeOrigin: true,ws: true,pathRewrite: {'^/api': ''}}}}}

2、 在main.js中配置

import Vue from 'vue' import App from './App.vue' import router from './router' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import axios from 'axios' import VueAxios from 'vue-axios' Vue.config.productionTip = falseVue.prototype.$axios = axios //配置跨域的 `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL axios.defaults.baseURL = '/api' //關鍵代碼Vue.use(ElementUI); new Vue({router,render: h => h(App) }).$mount('#app')

或者使用后端跨域

springBoot配置

1、局部跨域

@RestController public class TestController {/*** @CrossOrigin 跨域* value：請求的來源的域* maxAge：表示探測請求的有效期* allowedHeaders：表示允許的請求頭，*表示所有的請求頭都被允許* @return*/@PostMapping("/get")@CrossOrigin(value = "http://localhost:8080",maxAge = 1800,allowedHeaders = "*")public Book getBook(){Book book = new Book();book.setId(100);book.setAuthor("吳承恩");book.setName("西游記");return book;} }

2、全局配置

@Configuration public class WebMvcConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedHeaders("*").allowedMethods("*").maxAge(1800).allowedOrigins("http://localhost:8080");} }

#案例

<template><div><h1>主頁</h1>{{data}} </div> </template><script> export default {name:'home',data() {return {data:''}},created() {this.getPost();},methods: {getPost(){this.$axios.request({url:"http://localhost:9090/get", method: 'post'}).then((response)=>{console.log(response.data)this.data = response.data})}}, } </script><style></style>

總結

以上是生活随笔為你收集整理的Vue + SpringBoot跨域的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。