现在基本项目都是实行前后端分离的原则，不管是ng 或者是vue 在开发中都无法避免跨域的这个问题
本人刚上手第一个vue项目，在调用api的时候出现了跨域的这个问题
这是封装好一个简单的post 请求
http.js
- post (url, data) {
- return axios({
- method: 'post',
- baseURL: '/api',
- url,
- data: data,
- timeout: 10000,
- headers: {
- 'X-Requested-With': 'XMLHttpRequest',
- 'Content-Type': 'application/json'
- }
- }).then(
- (response) => {
- return response
- }
- )
- )
- }
在调用的时候 先import 这个http 后 this.http.post(url,data) 调用api接口出现跨域问题
一开始我是用的webpack反向代理解决跨域的问题。
打开项目目录下的/config/index.js 找到 proxyTable
- proxyTable: {
- '/api': {
- target: 'http://192.0.67.65/api',
- changeOrigin: true,
- pathRewrite: {
- '^/api': ''
- }
- }
- }
在开发过程中 ok 解决了 跨域的问题。
在 发布 npm run build 部署在本地打开的时候 出现404 错误。
只好然服务的进行处理解决跨域的问题
- header('Access-Control-Allow-Origin:*');//允许所有来源访问
- header('Access-Control-Allow-Method:POST,GET');//允许访问的方式
此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。
如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。
经验首页