四时宝库

程序员的知识宝库

vue webpack 跨域(vue跨域解决方案 简书)

在开发过程中,经常会遇到前端需要跨域请求后端接口的情况。Webpack 提供了一种简单的解决方案来处理跨域请求,可以通过配置 devServer.proxy 实现。

首先,在 webpack.config.js 文件中找到 devServer 字段,如果没有则需要手动添加。在该字段中添加一个 proxy 字段,如下所示:

```javascript

devServer: {

proxy: {

'/api': {

target: 'http://localhost:3000',

changeOrigin: true,

pathRewrite: {

'^/api': ''

}

}

}

}

```

上述代码中,我们配置了一个代理服务器,将以 /api 开头的请求转发到 http://localhost:3000 上。其中,target 表示目标服务器的地址,changeOrigin 设置为 true 表示开启跨域,pathRewrite 可以用来重写请求路径。

通过以上配置,我们可以在前端代码中使用 /api 来代替实际的请求地址,Webpack 会自动将 /api 替换为 http://localhost:3000,从而实现跨域请求。

devServer.proxy 只在开发环境中起作用,在生产环境中是无效的。在生产环境中,我们需要通过 Nginx 或其他服务器来配置代理。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接