vue開發-prxy server setting

最新推荐文章于 2024-08-05 20:36:42 发布

菜兔一隻

最新推荐文章于 2024-08-05 20:36:42 发布

阅读量86

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74253074/article/details/127447462

版权

本文详细介绍了Vue项目的配置文件Vue.config.js中的API代理设置，包括如何通过`/api`匹配并代理请求到指定目标URL，启用`changeOrigin`参数以支持跨域，以及运用`pathRewrite`进行路径重写，实现更灵活的请求路径管理。这些配置对于前端开发人员在开发过程中解决跨域问题和优化API调用路径具有重要意义。

摘要由CSDN通过智能技术生成

Vue.config.js

proxy: {
  '/api': {
    target: 'www.exampleTraget.com', //目標url
    changeOrigin: true, //target是域名的话，需要這個參數，否則請求會失敗
    pathRewrite: {
      '^/api': '/', //路徑重寫, 會改寫最後請求的api path
    },
  },
},

2.1 '/api'

如果發送的api url有匹配/api這個路徑，那麼就會走代理伺服器的路徑，比如API请求/api/login, 會被發送到 http://{target}/api/login 。

2.2 target

代理的API地址，就是需要跨域的API url。url可以是域名,如：http://exampleTarget.com 也可以是IP地址：http://[targetIP]:3000如果是域名需要額外添加changeOrigin: true，否則代理會失敗。

2.3 pathRewrite

路徑重寫，也就是說會修改最終請求的API路徑。比如訪問的API路徑：/api/login,設置pathRewrite: {'^/api' : ''},後，最終代理訪問的url：http://{target}/login，這個參數是用來給代理辨識到後在訪問的時候把url中符合的字符重寫成需要的url。