跨域請求前後端基礎解決方案(同時使用)

2021-10-06 11:28:55 字數 700 閱讀 5303

一.前端邏輯(基於elementui)

找到我們設定埠的index.js索引檔案,定位到proxytable屬性,在其中新增反向**

**格式如下:

proxytable: 

'/api':

},},

然後在我們的main.js中對axios配置乙個預設全域性屬性(需先配置並使用axios),格式如下

import axios from 'axios'
//給vue新增乙個全域性屬性

vue.prototype.$http=axios;

axios.defaults.baseurl='/api'//把所有使用axois傳送的請求前面加上/api
這樣我們所有對後端的跨域請求都可以實現了。

二,後端邏輯

直接在basic.congfig資料夾中增加乙個globalcorsconfig檔案,檔案內容如下

@configuration

public class globalcorsconfig

}

兩種配置一種即可實現跨域,建議兩種一起使用防止出錯。注:如果跨域完成後發現請求被404,如果後端的controller沒問題嗎,那可能是我們的main.js把axios的配置寫在了import上面導致他不能把/api解析成想要的位址。

前後端分離與跨域的解決方案

前後端分離與跨域的解決方案 cors的原理 vue中axios傳送options預檢請求的原因及如何通過 ps access control allow origin 該字段是必須的,表示接受任意網域名稱的請求,還可以指定網域名稱。access control allow credentials 該...

前後端分離專案,請求跨域解決

前端傳送請求,產生跨域問題 created 控制台報錯 在後端設定允許跨域請求 package com.demo.demobackend.config import org.springframework.context.annotation.bean import org.springframew...

前後端分離跨域問題解決方案

因為最近在學習vue和springboot.用到了前後端分離.前端webpack打包執行的時候會啟動nodejs的伺服器占用8080埠,後端springboot自帶tomcat啟動占用1111埠 我自己設定的 導致前端請求的ajax到後台會產生跨域問題.然後自己試了試發現有2種辦法都可以解決.1 p...