原生js实现jsonp跨域 jquery 实现跨域 vue实现跨域请求

原生js实现jsonp跨域 jquery 实现jsonp跨域 vue实现http跨域请求

在不同域名下请求数据就会产生跨域问题
同源：同一协议，同一域名，同一端口号。当其中一个不满足时，我们的请求即会发生跨域问题

ajax的同源策略就是为了安全起见，不允许在不同域名下请求数据

原生js实jsonp跨域
我的是在本地起来的服务器 可以用phpstudy或者用wampserver64来起服务 然后把文件放到www目录下面，进入www目录打开文件 从服务器里面打开文件

<script>
    //提供jsonp服务的url地址 (不管是什么类型的地址，最终生成的返回值都是一段javascript代码)
    var url = "http://localhost:80/test/jsonp.php";  //  这个路径不是在本地直接打开的文件路径（不能放到服务器里面，也就是www目录下面）
    var callback = function(data) {
        console.log("请求返回的数据",data);
    }

    //这里封装了一个函数 可以多次调用
    /*
        url参数就是请求的地址
        callback是我们获取返回数据的回到函数 
    */
    function ajaxJSONP(url,callback){
        var script = document.createElement("script")
        script.setAttribute("src",url+"?callback="+callback)
        console.log(script)
        document.getElementsByTagName("body")[0].appendChild(script);
    }
    //
    ajaxJSONP(url,callback);
</script>

jquery实现跨域请求

jQuery(document).ready(function(){
        $.ajax({
             type: "get",
             async: false,
             url: "http://localhost/jsonp.php?wen=howoldareyou",
             dataType: "jsonp",
             //主要就是下面这两行代码     
             jsonpCallback:"callback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
//           jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)     前后端设置的请求名字 一般默认为callback
             success: function(data){
                  alert('返回来的数据显示：' + data);
             },
             error: function(){
                 alert('fail');
             }
         });
     });

vue实现跨域请求
3.0版本没有config文件需要在src下新建vue.config.js文件 2.0是在config文件夹中的index.js中配置
就是配置vue.config.vue文件

module.exports = {


    // 所有 webpack-dev-server 的选项都支持。
    devServer: {
        host: "localhost",
        port: 8080, // 端口号
        https: false,
        open: true, //配置自动启动浏览器

        // 配置多个代理
        proxy: {
            "/api": {
            //比如我的请求链接为xxxx.com/aaa/?token=1e1245335435435463564354324520f;
                target: "xxxx.com", // 本地模拟数据服务器  跨域的域名
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "" // 去掉接口地址中的api字符串
                }
            }
        }
    }
};
在axios请求的路径中就可以直接写一下代码

在这里插入代码片

axios.get("/api/aaa/?token=1e1245335435435463564354324520f").then((res)=>{
console.log(res)})