Vue設(shè)置

1、在項(xiàng)目根目錄創(chuàng)建文件vue.config.js

module.exports = {devServer: {proxy: {'/api': {target: 'http://zlf.plus', //對(duì)應(yīng)自己的接口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` 將自動(dòng)加在 `url` 前面，除非 `url` 是一個(gè)絕對(duì) URL axios.defaults.baseURL = '/api' //關(guān)鍵代碼Vue.use(ElementUI); new Vue({router,render: h => h(App) }).$mount('#app')

或者使用后端跨域

springBoot配置

1、局部跨域

@RestController public class TestController {/*** @CrossOrigin 跨域* value：請(qǐng)求的來(lái)源的域* maxAge：表示探測(cè)請(qǐng)求的有效期* allowedHeaders：表示允許的請(qǐng)求頭，*表示所有的請(qǐng)求頭都被允許* @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>主頁(yè)</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>

總結(jié)

以上是生活随笔為你收集整理的Vue + SpringBoot跨域的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。