Vue.js跨域请求配置、Node.js设置允许跨域

最新推荐文章于 2023-06-06 13:54:06 发布

IT界幼稚生

最新推荐文章于 2023-06-06 13:54:06 发布

阅读量671

点赞数

分类专栏：前端 vue nodejs 文章标签： vue.js node.js

本文链接：https://blog.csdn.net/Angelia620/article/details/111881920

版权

本文详细介绍了在Vue.js项目中如何通过配置config/index.js的proxyTable实现跨域请求，以及在Node.js的app.js文件中设置允许跨域的策略，包括允许所有域名、指定域名和多个域名跨域的方法，为开发者提供了解决跨域问题的实践指导。

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

Vue跨域配置

在Vue项目目录中打开config/index.js,在proxyTable中添写如下代码：

// 跨域处理
    proxyTable: {
      '/api': { // 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:4000', // 代理模板的基础路径
        secure: true,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 支持跨域
        pathRewirte: { // 重写路径：去掉路径中开头的'/api'
          '^/api': '/api' //此处为问题原因，正确写法应为： '^/api': '/api'
        }
      }
    }

Node设置跨域 , 在你的app.js里

设置允许所有域名跨域：

app.all("*",function(req,res,next){
    //设置允许跨域的域名，*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin","*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers","content-type");
    //跨域允许的请求方式 
    res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS