背景:在前后端分离项目中,在前端调用后端的接口会产生跨域问题。通常的解决办法是在各个controller中添加@CrossOrigin注解,或是添加全局配置。
问题:在被调用的controller中添加了@CrossOrigin注解后,前端调用仍出现网络连接问题,打开F12提示跨域问题。
解决办法:后端接口使用了post提交方式,但在前端代码中定义的方法处,写的是get提交方式。二者不一致,导致跨域问题仍然存在。只需要将前后端的提交方式修改成一致即可。
补充:如果前端的接口代码文件中出现语法错,vscode本身不会报错,也不容易发现:
//正确版
import request from '@/utils/request'
export default {
firstTimeRelease(timeVo) {
return request({
url: `/time/teacher/time-release/first`,
method: 'post',
data: timeVo
})
}
}
//错误版
import request from '@/utils/request'
export default {
firstTimeRelease(timeVo) {
return request({
url: `/time/teacher/time-release/first`,
methods: 'post', //注意这里method多了一个s
data: timeVo
})
}
}
对比两处代码,method不能写成methods,编译器不报错,但浏览器会提示为跨域错误。
以后遇到跨域问题就可以着重看接口文件了。