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

待我称王封你为后i 2023-06-22 04:29 29阅读 0赞

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

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

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

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

**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)})