vue设置代理解决跨域访问问题“No ‘Access-Control-Allow-Origin‘ header is present on the requested resource.”

最新推荐文章于 2024-08-27 09:59:59 发布

清晨第一缕曙光

最新推荐文章于 2024-08-27 09:59:59 发布

阅读量626

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/gather_info/article/details/128396179

版权

本文介绍了如何通过配置Vue的devServer代理解决跨域问题，以'/api'为前缀的请求将被代理到指定的服务器地址'http://XXX.XXX.XXX.XXX:5001'。在HelloWorld.Vue组件中，使用axios发送GET请求到'/api/DataStatistics/A/1'，代理确保了请求的顺利进行。

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

使用代理方式解决跨域访问问题

跨域访问问题
config.js文件中的代码示例：

module.exports = defineConfig({
  transpileDependencies: true,
  //开启代理服务器
  devServer: {
    proxy: {
      // 请求前缀，匹配所有以'/api'开头的请求路径
      '/api': {
        target: 'http://XXX.XXX.XXX.XXX:5001',  // 要代理的后端域名地址
        ws: true, // //用于支持websocket
        secure: false,      // 如果是https接口，需要配置为true
        changeOrigin: true, // 是否允许跨域，设置成true：发送请求头中host会改成target
        pathRewrite:{'^/api':''} // 将匹配/api重写为空内容
      },
    }
  }
})

用’^/api’匹配请求地址，并将匹配值赋为空，替换成target值： http://XXX.XXX.XXX.XXX:5001/DataStatistics/A/1
HelloWorld.Vue文件中代码示例：

import axios from 'axios'
...
axios.get('/api/DataStatistics/A/1')
 .then(res=>{
     console.log('res=>',res);            
 }).catch(res=>{
   console.error(res);
 })