获取接口数据时出现（跨域）的解决方案
Posted Lumbago～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取接口数据时出现（跨域）的解决方案相关的知识，希望对你有一定的参考价值。
在最外层，src同级创建一个vue.config.js
module.exports =
publicPath: "./",
devServer:
open: true,
proxy:
'/api':
//填写url
target: "",
changeOrigin: true,
pathRewrite:
'^/api': ""
;
跨域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跨域解决方案</title>
<!-- element-ui 的样式表文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.4.5/theme-chalk/index.css"/>
</head>
<body>
<h2>JSONP 跨域</h2>
<img src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png" alt="">
<!--<iframe src="http://www.baidu.com" frameborder="0"></iframe>-->
<!--<h2>Proxy代理</h2>-->
<!--<h2>CORS(服务器端技术)</h2>-->
<!--<h2>Ngnix反向代理</h2>-->
<!--<h2>Websocket</h2>-->
<!--<h2>postMessage</h2>-->
<!--<h2>....</h2>-->
</body>
<script>
// var hello = 100;
function hello(a)
console.log(a);
console.log("这里是hello执行" + a)
function hello2(a)
alert(a);
alert("这里是hello执行" + a)
</script>
<script src="http://127.0.0.1:3000?callback=hello"></script>
<script>
//JSONP --> JSON PADDING
// JSON padding(填充
//HTML特殊标签不会受到同源策略影响
//link script img iframe
//JSONP原理 通过script标签不受同源策略的影响,通过src属性向后端发送请求,后端接受到请求之后,根据前端请求地址中的callback回调函数的名字 来把JSON数据填充到回调函数内部, 进行返回. 前端在接收到返回结果之后 自动的调用本地callback中填写的方法 实现数据获取
/*
* //JSONP实现代码
* 前端
* function hello(a)
* console.log(a);
* console.log("这里是hello执行" + a)
*
* <script src="http://127.0.0.1:3000?callback=hello">
*
* 后端
* let callbackObj = urlModel.parse(request.url, true).query;
* response.write(callbackObj.callback + "(" + JSON.stringify(a) + ")");
* */
// <!--<h2>Proxy代理</h2>-->
// module.exports =
// devServer: // 开发环境代理配置
// proxy:
// '/':
// target: "http://127.0.0.1:3000",
// changeOrigin: true
//
//
// ,
//
// <!--<h2>CORS(服务器端技术)</h2>-->
// response.headers("Access-Control-Allow-Origin","*");
</script>
<!--<script>
let xhr = new XMLHttpRequest();
xhr.open("GET","http://127.0.0.1:3000");
xhr.onreadystatechange = function()
if(xhr.readyState === 4)
console.log("responseText===>",xhr.responseText)
;
xhr.send();
//正常的跨域报错
/**
* Access to XMLHttpRequest at 'http://127.0.0.1:3000/' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
* */
</script>-->
<!--不是浏览器是不是就没有这个问题了?-->
</html>
以上是关于获取接口数据时出现（跨域）的解决方案的主要内容，如果未能解决你的问题，请参考以下文章
本地数据访问时出现跨域问题Cross origin requests are only supported for protocol schemes: ……