解决前后台分离跨域问题

最新推荐文章于 2024-04-27 18:55:57 发布

按键伤人啊

最新推荐文章于 2024-04-27 18:55:57 发布

阅读量828

点赞数 1

分类专栏： java javascript ajax 文章标签： ajax 跨域

本文链接：https://blog.csdn.net/naisi2422553065/article/details/83781872

版权

java 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

ajax

1 篇文章 0 订阅

订阅专栏

随着一段时间的学习发现之前写的东西的确挺蠢的哈哈哈, 这也许就是成长吧回头看看看自己的文章真的就是在误导人那时做的前后端分离项目根本就不明所以以后学东西都要多问为什么才行

更新:

1.为什么会出现跨域:

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

2.什么是跨域?

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

例如 http://192.168.2.2:8080 你与其协议(http://) ,域名(192.168.2.2或者 baidu.com) 端口(8080) 有一个不同就会出现跨域

3.怎么解决跨域?

1. jsonp 的方式

这个主在前端解决只支持get方法 (感觉要被淘汰了)

实现

方式一:

<script src="请求地址"></script>
 
// 处理数据
<script type="text/javascript">
    function dosomething(res){
        // 处理getdata
        console.log(res.data)
    }
</script>

方式二 :

$.ajax({
    url: '请求地址',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 回调函数名
    data: {}
});

2. CORS 的方式

CORS 是跨域资源分享（Cross-Origin Resource Sharing）的缩写。它是 W3C 标准，属于跨源 AJAX 请求的根本解决方法(比较主流)。

1.普通跨域请求：只需服务器端设置Access-Control-Allow-Origin 设置谁谁谁可以访问(叫后端设置一下就好)

前端就可以直接ajax

重点来了 -- --!

2.带cookie跨域请求：前后端都需要进行设置

列:

$.ajax({
   url: '请求地址',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
});

这就是为什么我下面写的为什么要这么干了知道为什么了哈哈哈...

然后后台处理跨域 java项目

/*
 * jh
 * 如果是springboot 项目在config 设置一下都差不多的 不然就在每个接口 用@CrossOrigin注解
 */
 
// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "http://www.jhdemo.com"); 
 
// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true"); 
 
// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

以上的东西是解决了很多博客才了解得感觉成长的路上有他们

历史:

这个问题,困扰了我几个星期了.直到今天早上(2018/11/6)找了同学过来帮我看看才知道是什么回事.在做ajax请求的的时候只要加上

cache:false,
// 解决一个跨域问题
xhrFields:{
withCredentials:true
},

这段代码就o**k的具体都不知道是什么原因,先写下来吧等理解了再更新.

登录前台模块的全部代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>欢迎登录</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/security.js"></script>
    <style>
        body{
            background:#eeeeee;           
        }
        #form1{
            text-align: center;
        }
        table{
            width: 400px;
            height: 270px;
            border: 1px solid #ccc;
            border-radius:15px;
            background: white;
            text-align: center;
            border-collapse:separate; border-spacing:40px;
           
        }
        table input{
            line-height: 2em;
        }
        .text1{
            color:#337a21;
            border: none;
            margin-left:50px;
            text-decoration: none;
        }
         a:hover{
            color:#5b6059;
            text-decoration: underline; 
        }
    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script>
        function Logon(){

            $.ajax({
                url: "http://localhost:8080/api/user/pubkey",
                type: "post",
                dataType: "json",
                cache: false,
                xhrFields:{
                                withCredentials:true
                            },
                beforeSend: function() {
                },
                complete: function() {
                },
                success: function (result) {
                    if (result.code == 200) {
                        var login_form = $("#form1");

                        var pwd = login_form.find("input[name=password]").val();
                        var modulus = result.data.modulus;
                        var exponent = result.data.exponent;

                        //加密
                        var key = RSAUtils.getKeyPair(exponent, "", modulus);
                        var apwd = RSAUtils.encryptedString(key, JSON.stringify({"password":pwd}));

                        $.ajax({
                            url: "http://localhost:8080/api/user/login",
                            type: "post",
                            data: "mobile_phone=" + login_form.find("input[name=mobile_phone]").val() + "&password=" + apwd,
                            dataType: "json",
                                cache:false,
                                xhrFields:{
                                    withCredentials:true
                                },
                            beforeSend: function() {
                            },
                            complete: function() {
                            },
                            success: function (result) {
                                if (result.code == 200) {
                                    window.location.href = "demo.html";
                                } else {
                                    alert(result.msg);
                                }
                            },error: function (result) {
                                alert("网络连接失败！");
                            }
                        });
                    } else {
                        alert(result.msg);
                    }
                },error: function (result) {
                    alert("网络连接失败！");
                }
            });
       }
    </script>
</head>
<body>
    <form action="" id="form1" method="post" enctype="multipart/form-data">
  
    <table cellpadding="5" cellspacing="0" border="0" class="centenTable" align="center">
    <caption style=" font-size:25px; margin-top: 20px;">输入您登录的信息</caption>
        <tr>
            <td>账号：
                <input type="text" id="phone" name="mobile_phone" autocomplete="off" value="13025657208"/>
            </td>
        </tr>    
        <tr>
            <td>密码：
                <input type="text" id="pow" name="password" autocomplete="off" value="123456"/>
            </td>
        </tr>
        <tr>
            <td><input type="button" id="btn" value="登录"  onclick="Logon()"/>
            <a href="register.html" class="text1">注册</a></td>
        </tr>
        </table>
    </form>
</body>
</html>

其中用到了两个后台的接口一个是加密的一个登录的具体代码也是搬过来的哈哈

菜鸟一枚,望见谅!!!

按键伤人啊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决前后台分离跨域问题

随着一段时间的学习发现之前写的东西的确挺蠢的哈哈哈, 这也许就是成长吧回头看看看自己的文章真的就是在误导人那时做的前后端分离项目根本就不明所以以后学东西都要多问为什么才行更新: 1.为什么会出现跨域: 出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能...
复制链接

扫一扫

专栏目录