前端从跨域到跑路

最新推荐文章于 2023-06-09 11:38:15 发布

Eastboat

最新推荐文章于 2023-06-09 11:38:15 发布

阅读量322

点赞数

文章标签： cookie跨域

本文链接：https://blog.youkuaiyun.com/Jquery_ch/article/details/81290565

版权

前端跨域问题

解决跨域问题首先必须了解同源策略

同源策略，它是由Netscape提出的一个著名的安全策略。
现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。
例如：
当你从你本地http://127.0.0.1:8080访问你的项目接口http://www.xxxxxx.cn/api/..时,
http://127.0.0.1:8080 中 http就是协议  127.0.0.1为你本机ip地址  端口号为8080
而在你项目接口中  
www.xxxxx/cn即为域名(一般域名都会被DNS解析为ip地址) 端口号也有默认值
此时很明显，我们没有做到同源策略的规定，没有保证三者(协议，域名，端口号)一致，跨域的问题便接踵而来

怎么解决？其实网上有大多解决方案，此处我要记录的不是此问题，所以就不做阐述

一般跨域解决方案，当然也是我比较常用的，如下
1.通过jsonp跨域;
2.nodejs中间件代理跨域,如vue+node.js
3.nginx代理跨域等等,当然适自己的情况而定
4.此外还可以对chrome浏览设置可参考：https://www.cnblogs.com/cshi/p/5660039.html

记录一大坑----- cookies跨域问题

项目中开始做登录，在使用ajax请求登录接口的时候，后台返回给我的set-cookie居然没有保存到我本地?

说明：

1.后台采用php的laravel框架，将状态信息保存在服务器session，返回给客户端的set-cookies虽然在响应信息中，但是没有保存到我本地cookies;

2.关于登录状态信息的保存一般会使用cookie会话机制和token;

就在发现这个问题的时候，后台说让我用form表单提交，不用ajax了，what？？？？

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录测试</title>
    <script src="./js/jquery-1.11.0.js"></script>

</head>

<body>
    <formid="doctorLoginForm">
        <input type="text" name="username" id="username" placeholder="请输入手机号码"><br>
        <input type="password" name="password" id="password" placeholder="请输入密码"><br>
        <input type="button" id="doctorLogin" value="登录"></input>
    </form>
</body>
<script>
    $(document).ready(function() {
        $("#doctorLogin").click(function() {
            $.post("http://xxxx.cn/login", {
                username: $("#username").val(),
                password: $("#password").val()
            }, function(res) {
                console.log(res);
            }, "json")


        })
    })
</script>

</html>

登录接口使用ajax，set-cookies保存不到本地，然后我就使用表单提交

 <form action="http:/www.xxxx.cn/login" method="POST" id="doctorLoginForm">
        <input type="text" name="username" id="username" placeholder="请输入手机号码"><br>
        <input type="password" name="password" id="password" placeholder="请输入密码"><br>
        <input type="submit" id="doctorLogin" value="登录"></input>
  </form>