VUE的跨域知识

发表于

Vue跨域配置

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

1
2
3
4
5
6
7
8
9
proxyTable: { 
  '/api': {  //使用"/api"来代替"http://  你的地址（http://127.0.0.1:3000）" 
    target: 'http:// 你的地址 ',    //源地址 
    changeOrigin: true,    //改变源 
    pathRewrite: { 
      '^/api': 'http://  上面的地址，或者空着不写'     //路径重写 
      } 
  } 
}

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

设置允许所有域名跨域：

1
2
3
4
5
6
7
8
9
10
11
12
13
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”跨域：

1
2
3
4
5
6
7
8
9
10
11
12
13
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();
    }
}

设置允许多个域名跨域：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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();
    }    
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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();
    }
}