問題
No 'Access-Control-Allow-Origin' header is present on the requested resource.
- 瀏覽器url直接測試可以請求到數據
原因分析
瀏覽器同源策略限制
本地開發、前後臺分離、端口不同
解決過程
方案一:後端改
使用@CrossOrigin
但是報了新的錯(忘記了),因爲不熟悉後臺,先捨棄該方案
方案二:前臺改
通過proxyTable,修改config–>index.js
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/': {
target: 'http://127.0.0.1:18891/',
// target: 'http://114.255.193.247:18891/',
changeOrigin: true,
pathRewrite: {
'^/': '/'
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8070, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
請求的url寫法:
let that=this
let params={
"a": that.a,
"b": that.b
}
this.$axios.post('/index/gamenum',params).then((res)=>{
//todo
}).catch((err)=>{
console.log(err)
})
注意事項–很多時候請求失敗並不是單純的前端配置或者書寫不正確
- 注意後臺接收param格式的不同,比如@RequestBody常用來處理Content-Type爲application/json, application/xml的數據,GET請求不能用@RequestBody來接收參數