欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue webpack配置解决跨域问题

程序员文章站 2022-04-06 12:03:25
现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 http.js 在调用的时候 先import 这个http 后 this.http.post(ur ......

现在基本项目都是实行前后端分离的原则,不管是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');//允许访问的方式 

 

 

此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。