前端跨域的几种方法

这种方法是浏览器会借助script这个标签去访问其他服务器的资源, 达到传参的目的, 因为浏览器的script标签路径不会做拦截和校验. 一般前端会定义参数和回调函数, 然后组装到url上作为script.src, src指向的服务器会做处理, 执行回调函数并传值

// http://localhost:9990/jsonp.js
foo({ a: 1221 });
document.body.style.backgroundColor = "red";

这样test.html中的就会alert({ a: 1221 })了, 这样就达到了跨域传参的效果, 也就是8888端口访问9990端口, 但是jsonp也可能造成xss攻击, 如果这个接口被别人, 也这样去用, 会导致本该信息泄露

这个其实就是后端去处理了, 反正就是放开对服务器地址的访问, 不同域名也可以访问我, 比如那种完全放开的api就是这样, 对前端的访问不做限制

比如a网站想和b网站做交互, 如何去实现呢, 可以用postMessage, a网站post 一个message, b网站进行一个监听, 然后处理a网站传输过来的值即可

其实这种我个人在本地开发用的比较多, 前后端分离的项目, 如果想访问后端的接口地址, 经常会碰到跨域的问题, 工程化的项目在wepack.config.js 或者 vue.config.js中的devServer.proxy配置一下后端地址即可

proxy:{
            //一旦devServer5000接到/api/xxx的请求，就会把请求转发到另一个服务器3000
            '/api':{
                //转发后的目标地址
                // target: project_config.proxyAddr,
                target:'localhost:3000',
                // 发送请求时，请求路径重写 /api/xxx ->  /xxx （去掉a/pi）
                pathRewrite: {
                    '^/api': ''
                }
            }
        }

但是比较小的项目怎么办, 类似jquery + layui这种, 根本用不上脚手架什么的, 可以用在本地下载一个nginx, 启动nginx.exe, 然后修改一下nginx.conf, 再nginx.exe -s reload即可, 例如以下配置会导致访问localhost: 9991/api/getUser => http://xxxxx.cn:8085/api/getUser, 达到跨域的目的

    server {
        listen       9991; // 本地开发端口, 可以开好多
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:UsersxxxxDesktopdemo; // 本地开发文件夹
            index  index.html  index.htm;
        }

        location /api { // 所有接口中带api的都会指向http://xxxxx.cn:8085/api
            
            proxy_pass http://xxxxx.cn:8085/api; 

        }
     }