svelte + axios + php的跨域和跨域携带cookie配置(绝对靠谱)

客户端设置:

这个是自己配置的一个

import axios from 'axios';
let HOST = __DEBUG ? 'http://ulegou.c.com/newindex' : 'https://ulegou.xxx.com/newindex';

function encodeFormData(data) {
    var pairs = [];
    var regexp = /%20/g;
    for (var name in data) {
        var value = data[name].toString();
        var pair = encodeURIComponent(name).replace(regexp, "+") + "=" + encodeURIComponent(value).replace(regexp, "+");
        pairs.push(pair);
    }
    return pairs.join("&");
};
const config = (url, data) => {
    let c = {};
    c.url = url;
    c.method = typeof(data) !== "function" ? 'post' : 'get';
    if (c.method == 'post') {
        c.data = data ? encodeFormData(data) : {};
    }
    // cookie
    c.withCredentials = true
        // 域名
    c.baseURL = HOST
        // 协议头
    c.headers = {
            // 'X-Requested-With': 'XMLHttpRequest',
            'Content-Type': 'application/x-www-form-urlencoded',
        }
        // 请求前处理
    c.transformRequest = [(e) => {
            return e;
        }]
        // 请求后处理
    c.transformResponse = [(e) => {
        return e;
    }]
    return c;
}
const send = (url, data) => {
    let c = config(url, data);
    return new Promise((resolve, reject) => {
        axios(c).then((e) => {
            resolve(JSON.parse(e.data))
        }).catch((error) => {
            console.log(error);
        });
    })
}
export default send;

配置里面的这个是必须要开的

c.withCredentials = true

自己看上面的封装吧,我这边目前使用的是这个!

服务端php,这个代码放到php的入口文件就可以了,最好的最最最上方

// 设置能访问的域名
$originarr = [
	'http://ulegou.c.com:5000',
];
// 获取当前跨域域名
$origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';

if (in_array($origin, $originarr)) {
	// 允许 $originarr 数组内的 域名跨域访问
	header('Access-Control-Allow-Origin:' . $origin);
	// 响应类型
	header('Access-Control-Allow-Methods:POST,GET');
	// 带 cookie 的跨域访问
	header('Access-Control-Allow-Credentials:true');
	// 响应头设置
	header('Access-Control-Allow-Headers:x-requested-with,Content-Type,X-CSRF-Token');
	header("Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS");
    header('Access-Control-Allow-Headers: Origin, Access-Control-Request-Headers, SERVER_NAME, Access-Control-Allow-Headers, cache-control, token, X-Requested-With, Content-Type, Accept, Connection, User-Agent, Cookie');
}

//部分前端请求会携带这个玩意OPTIONS,让他取消还特么不会的,就把这个加上,过滤掉
if(isset($_SERVER['REQUEST_METHOD']) && $_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
    die('狗蛋,你又调皮了,By:Maiji');
}

基本上这个配置就可以跨域了,如果你的跨域不能携带COOKIE,那么就看下面这个链接,

我个人的一个解决办法就是,使用客户端的host修改,只用改域名就可以了,如果使用localhost访问是没有办法达到跨域携带cookie的,另外一个方案就是,吧host改成你API接口的域名这个绝对靠谱

鄙人第一次尝试使用异步的方法,以下是案例,不知道对不对啊,因为之前都是专注于同步的方法,使用的回调处理

async function onlogin() {
        if(phone == undefined || pass == undefined){
            return re.toast("账号或密码不能为空");
        }
        if (phone.length != 11) {
            re.toast("请输入正确手机号");
        } else if (pass.length < 6) {
            re.toast("请输入正确的密码");
        } else {
            let e = await re.send("login/login.html", {
                phone: phone,
                pass: pass,
            });
            if (e.code == 1) {
                await getuser();
                if (pass_state == true) {
                    re.db("Remember_password", {
                        phone: phone,
                        pass: pass,
                    });
                } else {
                    re.db("Remember_password", null);
                }
                f7router.navigate("/home");
            } else {
                re.toast(e.msg);
            }
            async function getuser() {
                re.send("my/user.html").then((e) => {
                    re.db("user", e.data);
                });
            }
        }
    }

修改链接:跳转

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值