鍍金池/ 問答/HTML/ vue+webpack+axios跨域請求，No 'Access-Control

vue+webpack+axios跨域請求，No 'Access-Control-Allow-Origin' header'？

用vue-cli搭建的vue項(xiàng)目，axios發(fā)起get請求的時(shí)候，控制臺報(bào)錯(cuò)：
Failed to load http://222.16.46.131:8080/Skyworth/changePictureAdmin: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 502.
我要訪問的http://222.16.46.131:8080/Skyworth/changePictureAdmin是別人寫好的，已經(jīng)部署在其他服務(wù)器的接口，后臺有設(shè)置cors，請問前端vue項(xiàng)目需要更改什么配置文件，才能成功跨域請求？

回答
編輯回答
放開她

1.你的問題是跨域請求：因?yàn)槟闶窃诒镜亻_發(fā)的，你請求的后臺服務(wù)器的數(shù)據(jù)會對非同一個(gè)域名下的請求有限制，所以會報(bào)錯(cuò)。
2.解決方案：
（1）安裝chrome插件 Allow CORS
（2）服務(wù)端設(shè)置 在php接口腳本中加入以下兩句即可：

 header('Access-Control-Allow-Origin:*');//允許所有來源訪問
 header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
2018年5月25日 22:50
編輯回答
伴謊

你看看這個(gè)能解決你那個(gè)問題嘛：https://segmentfault.com/a/11...

2017年4月3日 22:13
編輯回答
空白格

修改webpack 配置里面的 devServer, 設(shè)置proxy,參考 https://webpack.js.org/configuration/dev-server/#devserver-proxy

2017年5月26日 14:53
編輯回答
夢囈

后臺那邊沒設(shè)置跨域，你訪問不了，可以這樣設(shè)置

app.all('*', function (req, res, next) {
    res.header('Access-Control-Allow-Origin', req.headers.origin || '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization,\'Origin\',Accept,X-Requested-With');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('X-Powered-By', ' 3.2.1');
    res.header('Content-Type', 'application/json;charset=utf-8');
    if (req.method === 'OPTIONS') {
        res.sendStatus(200);
    } else {
        next();
    }
});
2017年3月2日 20:47
編輯回答
不歸路

要進(jìn)行跨域設(shè)置啊

2018年5月23日 19:30
編輯回答
命多硬

設(shè)置請求頭

2017年3月21日 17:17