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

╰+攻爆jí腚メ 2022-12-31 07:30 173阅读 0赞

## 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");
        if (req.method.toLowerCase() == 'options'){
            res.send(200);  //让options尝试请求快速结束
        }else{
            next();
        }
    }

设置允许指定域名“[http://xxxxxx][http_xxxxxx]”跨域：

app.all("*",function(req,res,next){
        //设置允许跨域的域名
        res.header("Access-Control-Allow-Origin","http://xxxxxx");
        //允许的header类型
        res.header("Access-Control-Allow-Headers","content-type");
        //跨域允许的请求方式 
        res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
        if (req.method.toLowerCase() == 'options'){
            res.send(200);
        } else{
            next();
        }
    }

设置允许多个域名跨域：

app.all("*",function(req,res,next){
        //判断请求头
        if( req.headers.origin.toLowerCase() == "http://xxxxxx"
            || req.headers.origin.toLowerCase() =="http://127.0.0.1" ) {
            res.header("Access-Control-Allow-Origin", req.headers.origin);
        }
        //允许的header类型
        res.header("Access-Control-Allow-Headers", "content-type");
        //跨域允许的请求方式 
        res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
        if (req.method.toLowerCase() == 'options'){
            res.send(200);
        } else{
            next();
        }    
    }

如果允许的域名较多，可以将允许跨域的域名放到数组当中：

app.all("*",function(req,res,next){
        var orginList=[
            "http://127.0.0.1",
            "http://www.xxxxxx.com",
            "http://www.baidu.com",
            "http://www.alibaba.com",
            "http://www.qq.com"
        ]
        if(orginList.includes(req.headers.origin.toLowerCase())){
            res.header("Access-Control-Allow-Origin",req.headers.origin);
        }
        //允许的header类型
        res.header("Access-Control-Allow-Headers", "content-type");
        //跨域允许的请求方式
        res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
        if (req.method.toLowerCase() == 'options'){
            res.send(200);
        } else{
            next();
        }
    }

[http_xxxxxx]: http://xxxxxx/