跨域与前后端分离

百度关于跨域的文章几乎每个文章都会有这么一个图和这几个解决方案

只要是跟当前页面所在url不同的请求都属于跨域请求,为什么我可以访问cdn或者引入其他网站的js或者css或者图片,那是因为src这个标签是支持跨域的,你用ajax去获取外网的js,css,图片试试,所以==把页面放在跟请求一个地址的服务器里面,就是最强的解决跨域的方案==

从jq-ajax文章过来的可以回去了,下面的内容超纲了

vue-cli是启动了一个开发版的本地服务器,域名是localhost:端口,在脚手架里写请求自然不可能,那就只能写完打包出来,把打包文件放到跟请求同一个域名的服务器里咯,这个虽然可以,但是也太傻了,改一下打包一下发布一下,还是看看其他解决跨域的方案吧

解决跨域方案

  1. 通过jsonp跨域(只能跨域get请求)
  2. document.domain + iframe跨域
  3. location.hash + iframe
  4. window.name + iframe跨域
  5. postMessage跨域
  6. 跨域资源共享(CORS)
  7. nginx代理跨域
  8. nodejs中间件代理跨域
  9. WebSocket协议跨域

上面的方案我们只取第六点,第7点,第八点,【7和8是一样的】

再看回axios篇里的这句代码

baseURL: process.env.NODE_ENV === 'development' ? '/proxy' : 'http://xxx.com',

需要解决的问题有

  • 线上正式版跨域调不通
  • 本地开发跨域调不通

线上正式版跨域调不通
首先就是要服务端支持跨域,叫做CORS,这个你要让后端去设置,如果是java和nodejs的开发,查看笔记有代码可以复制,开启CORShttp://xxx.com就支持跨域了,也就是打包完成后你放在http://aaa.com请求http://xxx.com的所有请求都可以了

本地开发跨域调不通
既然线上都开启CORS了,本地也可以开启CORS,然后把上面的代码改成

baseURL: process.env.NODE_ENV === 'development' ? 'http://localhost:后端的本地端口' : 'http://xxx.com',

行不行,个人测试不行,其实应该是可以的,但不知道什么原因,所以还是用上面的方法吧
既然浏览器不能跨域,就让本地服务器去请求后转给你,也就是让localhost:端口这个服务器去请求,上面的这个/proxy是简写,实际是localhost:端口/proxy,可以理解吧,为什么要加上这个值呢,这个值就是一个标识而且,改成aa,bb也行,这个值就是为了告诉脚手架服务器,你如果看到有请求带有这个标识,你就替我去另一个地址把请求数据拿过来

问题是我怎么让服务器有这个功能,vue-cli自带的有个proxy插件,配置一下就行
在vue.config.js里

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // 这个就是被监听的标识
      "/proxy": {
        // 然后脚手架去这个地址请求数据,这个就是本地的后端服务器以及端口
        target: "http://127.0.0.1:8080/",
        changeOrigin: true,
        pathRewrite: { '^/proxy': '' },
     }
   }
}

proxy的配置后很多,这个是最基础的写法,如果有其他需求,可以查一下百度

这时本地的脚手架应该就能调通本地的接口了,线上的项目也能调通线上的接口了,问题都解决了,就是一句baseURL的三元运算符和几行proxy的配置而已,本来不应该写这么多的,上代码自行理解就行,但是还是想解释一下,一解释就写了两篇笔记出来

谈谈前后端分离
这是一道面试题来的

前后端不分离
特点是:页面完全后后端模板生成,数据由后端渲染
比如node的ejs模板渲染
比如java的jstl和jsp渲染
这些写法需要专门去学,不是正常的html标签,如今已经都淘汰了,因为很少有人懂了,维护成本特别高

前后端半分离
就是把项目跟服务器放在同个服务器里,很常见的很普通的开发模式,jq时代

前后端分离
就是前端代码一个服务器,后端代码一个服务器,开启跨域支持,自己开发完更新自己的代码就行,但是前后端分离就失去了同源策略,如果缺少了同源策略,浏览器很容易受到 XSS、CSFR 等攻击,可以查看无分类的《安全和攻击》笔记

补充jsonp
面试题来着,但正常不会用,以前豆瓣和百度的搜索接口就是用jsonp实现的
jsonp是怎么实现的,原理就是你把一个全局的==方法名==作为参数传给后端,比如参数叫cb,后端接口到参数后,查数据库然后把数据包在参数里,返回值如下,并且把返回值设置成js格式,数据返回后就会自动的执行全局的cb方法,这个方法的参数就是跨域的数据

cb('{"name":"name"}')

jq使用jsonp

$.ajax({
    type : "get",
    url : "http://xxxx",
    dataType: "jsonp",
    jsonp:"callback",
    jsonpCallback: "doo",
    success : function(data) {
        console.log(data);
    }
});

fetch和axios没有jsonp,需要自己封装

(function (window,document) {
    "use strict";
    var jsonp = function (url,data,callback) {

        // 1.将传入的data数据转化为url字符串形式
        // {id:1,name:'jack'} => id=1&name=jack
        var dataString = url.indexof('?') == -1? '?': '&';
        for(var key in data){
            dataString += key + '=' + data[key] + '&';
        };

        // 2 处理url中的回调函数
        // cbFuncName回调函数的名字 :my_json_cb_名字的前缀 + 随机数(把小数点去掉)
        var cbFuncName = 'my_json_cb_' + Math.random().toString().replace('.','');
        dataString += 'callback=' + cbFuncName;

        // 3.创建一个script标签并插入到页面中
        var scriptEle = document.createElement('script');
        scriptEle.src = url + dataString;

        // 4.挂载回调函数
        window[cbFuncName] = function (data) {
            callback(data);
            // 处理完回调函数的数据之后,删除jsonp的script标签
            document.body.removeChild(scriptEle);
        }

        document.body.appendChild(scriptEle);
    }

    window.$jsonp = jsonp;

})(window,document)

补充WebSocket
WebSocket 是一种双向通信协议,也就是qq,微信的聊天原理,在建立连接之后,WebSocket的 server与 client都能主动向对方发送或接收数据而不受同源策略的限制。

function WebSocketTest(){
    if ("WebSocket" in window){
        alert("您的浏览器支持 WebSocket!");
        // 打开一个 web socket
        var ws = new WebSocket("ws://localhost:3000/abcd");
        ws.onopen = function(){
            // Web Socket 已连接上,使用 send() 方法发送数据
            ws.send("发送数据");
            alert("数据发送中...");
        };
        ws.onmessage = function (evt) {
            var received_msg = evt.data;
            alert("数据已接收...");
        };
        ws.onclose = function(){
            // 关闭 websocket
            alert("连接已关闭...");
        };
    } else{
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }
}

原文地址:https://www.cnblogs.com/pengdt/p/12046420.html

时间: 2024-10-27 17:02:43

跨域与前后端分离的相关文章

前端跨域及前后端交互验证

JWT Json Web Token,是一个token的加密处理方式 是目前阶段比较流行的一种token处理方式 http请求是无状态的,为了保证多次请求之间的状态数据 ,可以使用token或者cookie的方式来传递用户状态 不同域名之间发送的请求 可以在ajax中设置withCreadentials来保存cookie数据, 同时需要指定服务器端cors的源不为"\*" 配置项 withCreadentials为true 跨域问题 前端无法解决跨域, 可以通过服务器端添加带来服务器做

前后端分离模式

我是做java出身的前端开发工程师经历过由前端视图逻辑和后端的业务逻辑混合的开发模式, 在到由ajax跨域请求来进行前后端的分离的模式,最后到由nodejs来进行前后端的分离, 今天就分别站在不同的视角上尽可能的为大家剖析下这几种模式的优缺点. 前后端逻辑混合开发模式: 这种开发模式在现在来看几乎没有什么优点,但是在很多互联网公司依然在用,我想这大概是历史原因造成的吧, 也有可能缺乏技术体系的整体思想,但是也不能完全否定其优点,与第二种开发模式相比较. 优点: 1. 用户体验好,在相同的网络条件

SpringBootSecurity学习(12)前后端分离版之简单登录

前后端分离 前面讨论了springboot下security很多常用的功能,其它的功能建议参考官方文档学习.网页版登录的形式现在已经不是最流行的了,最流行的是前后端分离的登录方式,前端单独成为一个项目,与后台的交互,包括登录认证和授权都是由异步接口来实现.在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高.这种应用模式比较适合纯网页应用, 但是当后端对接App时,App可能并不需要后端返回一个HTML网页,而

前后端分离跨域问题解决方案

问题 因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111端口(我自己设置的)...导致前端请求的ajax到后台会产生跨域问题...然后自己试了试发现有2种办法都可以解决. 利用SpringMVC @CrossOrigin注解 1 package com.labofjet.system.controller; 2 3 import org.slf4j.Lo

前后端分离,解决跨域问题及django的csrf跨站请求保护

1. 前后端分离解决跨域问题 解决跨域调用服务并设置headers 主要的解决方法需要通过服务器端设置响应头.正确响应options请求,正确设置 JavaScript端需要设置的headers信息 方能实现: 关于跨域,前端会先发送OPTIONS请求,进行预检,检查后端是否允许前端设置的相应的请求头,请求内容 function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie

【js】【跨域问题】前后端分离的跨域问题

最近在研究nodejs,php的前后端分离相关东西,在调用接口的时候碰到一些跨域的问题,经过一段时间的摸索,总结出来的一些东西 php采用的是yii框架,登录的机制或者调用接口都需要前端传递cookie进去,但是nodejs的axios接口等默认是不会传递cookie的 跨域解析:浏览器请求非本域名的网站资源,如果目标服务器没有设置跨域的情况下,浏览器是会阻止用户的请求的 跨域的解决途径:可以配置后端服务转发的机制绕开跨域问题:也可以直接配置目标服务器的跨域配置 配置转发 搭建一个和前端处于同一

Aspnet Mvc 前后端分离项目手记(一) 关于跨域问题(还有前言)

前言,最近的项目使用前后端分离的模式,记录其中一些知识点.经过这个项目,也对前后端分离有了更多理解,尤其是在技术之外的方面. 越来越多的项目采用前后端分离的原因,有两点:      1,技术方面的原因:移动端的越来越重要,一个项目可能要做好几种版本,手机端,app,pc...,,前端完全负责页面展示后端只负责统一的api: react,vue,ng一些优秀框架的产生,解决了很多前端开发者的痛点:还有一些随之而来的成熟框架elementui,iview等等.       2 ,非技术方面的原因 

Django前后端分离跨域请求问题

一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应,同源策略也是浏览器针对请求的安全问题所作出的一种保护行为.针对跨域问题,可以有下面的解决方式: JSONP方式 自定义中间件,设置响应头 使用django-cors-headers包 二.解决方式 (一)自定义中间件 JSONP本质上是利用html的一些不受同源策略影响的标签属性src,例如:<a

ASP.NET WebApi+Vue前后端分离之允许启用跨域请求

前言: 这段时间接手了一个新需求,将一个ASP.NET MVC项目改成前后端分离项目.前端使用Vue,后端则是使用ASP.NET WebApi.在搭建完成前后端框架后,进行接口测试时发现了一个前后端分离普遍存在的问题跨域(CORS)请求问题.因此就有了这篇文章如何启用ASP.NET WebApi 中的 CORS 支持. 一.解决Vue报错:OPTIONS 405 Method Not Allowed问题: 错误重现: index.umd.min.js:1 OPTIONS http://local