江门做网站哪家好,石龙建设网站,购物网站开发将商品导入数据库,静态网页设计与制作本文有配套视频#xff1a;https://www.bilibili.com/video/av58096866/?p8一、为什么会出现跨域的问题跨域问题由来已久#xff0c;主要是来源于浏览器的”同源策略”。何为同源#xff1f;只有当协议、端口、和域名都相同的页面#xff0c;则两个页面具有相同的源。只要… 本文有配套视频https://www.bilibili.com/video/av58096866/?p8 一、为什么会出现跨域的问题跨域问题由来已久主要是来源于浏览器的”同源策略”。 何为同源只有当协议、端口、和域名都相同的页面则两个页面具有相同的源。只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同网站间的数据请求与传输便构成了跨域调用会受到同源策略的限制。 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。浏览器的同源策略出于防范跨站脚本的攻击禁止客户端脚本如JavaScript对不同域的服务进行跨站调用通常指使用XMLHttpRequest请求。发生跨域的三个必要条件浏览器限制 即浏览器对跨域行为进行检测和阻止触发跨域的三要素之一 即 协议域名和端口三个条件满足其一发起的是xhr请求 即发起的是XMLHttpRequest类型的请求所以说我们在web中我们无法去获取跨域的请求常见的就是无法通过js获取接口。这里要说下我的以前使用的经验在同源系统下前端js去调用后端接口然后后端C#去调取跨域接口这是我以前采用的办法但是前后端分离这个办法肯定就是不行了因为那时候的MVC仅仅是页面上的前和后还是一个项目现在却是不同域名或端口的两个项目。但是只要我们合理使用同源策略就可以达到跨域访问的目的。 二、JsonP首先需要建立了一个前端项目用 IIS 代理一下用来模拟前后端分离后的前端访问部分具体如下步骤1、模拟前端访问页面在 wwwroot 文件夹下新建一个 CorsPost.html 静态页面使用Jquery来发送请求。设计了2种跨域方法一个是 JSONP 的一个是 CORS 的!DOCTYPE html
html
head meta charsetutf-8 titleBlog.Core/title script srchttps://cdn.bootcss.com/jquery/1.10.2/jquery.min.js/script style div { margin: 10px; word-wrap: break-word; }
/style script $(document).ready(function () { $(#jsonp).click(function () { $.getJSON(http://localhost:8081/api/Login/jsonp?callBack?, function (data) { $(#data-jsonp).html(数据: data.value); }); }); $(#cors).click(function () { $.get(http://localhost:8081/api/Login/Token, function (data, status) { console.log(data); $(#status-cors).html(状态: status); $(#data-cors).html(数据: data? data.token:失败); }); }); $(#cors-post).click(function () { let postdata { bID: 10, bsubmitter: 222, btitle: 33333, bcategory: 4444, bcontent: 5555, btraffic: 0, bcommentNum: 0, bUpdateTime: 2018-11-08T02:36:26.557Z, bCreateTime: 2018-11-08T02:36:26.557Z, bRemark: string }; $.ajax({ type: post, url: http://localhost:8081/api/Values, contentType: application/json, data: JSON.stringify(postdata), success: function (data, status) { console.log(data); $(#status-cors-post).html(状态: status); $(#data-cors-post).html(数据: JSON.stringify(data)); } }); }); });
/script
/head
body h3通过JsonP实现跨域请求/h3 button idjsonp发送一个 GET /button div idstatus-jsonp/div div iddata-jsonp/div hr / h3通过CORS实现跨域请求另需要在服务器段配置CORE/h3 button idcors发送一个 GET /button div idstatus-cors/div div iddata-cors/div hr / button idcors-post发送一个 POST /button div idstatus-cors-post/div div iddata-cors-post/div hr /
/body
/html 注意这里一定要注意jsonp的前端页面请求写法要求很严谨 2、请求页面部署1、其实只需要当前Blog.Core 项目配置了静态文件中间件直接访问就可以比如我的在线地址http://xxxxx:8081/corspost.html但是这样起不到跨域的目的因为这样前台和后台还是公用的一个 8081 端口方法不推荐。 2、单独部署将这个页面部署到自己的IIS中拷贝到文件里直接在iis添加该文件访问刚刚的Html文件目录就行推荐。 3、设计后台接口在我们的项目 LoginController 中设计Jsonp接口Core调用的接口我们已经有了就是之前获取Token的接口GetJWTStr /// summary /// 获取JWT的方法4给 JSONP 测试 /// /summary /// param namecallBack/param /// param nameid/param /// param namesub/param /// param nameexpiresSliding/param /// param nameexpiresAbsoulute/param /// returns/returns [HttpGet] [Route(jsonp)] public void Getjsonp(string callBack, long id 1, string sub Admin, int expiresSliding 30, int expiresAbsoulute 30) { TokenModelJwt tokenModel new TokenModelJwt { Uid id, Role sub }; string jwtStr JwtHelper.IssueJwt(tokenModel); string response string.Format(\value\:\{0}\, jwtStr); string call callBack ({ response }); Response.WriteAsync(call); } 注意这里一定要注意jsonp的接口写法要求很严谨 4、测试点击 “通过JsonP实现跨域请求”按钮发现已经有数据了证明Jsonp跨域已经成功你可以换成自己的域名试一试但是Cors的还不行 现在咱们就说说这种JSONP跨域的优劣有哪些优势1、操作很简单2、支持老式浏览器劣势1、这种方式只能发生get请求2、确定jsonp的请求是否失败并不容易大多数框架的实现都是结合超时时间来判定3、不太安全可能也会受到攻击从上边咱们可以看出来虽然JSONP操作起来很简单几乎和我们的 Ajax 请求没有什么区别但是弊端也特别大目前市场上并没有很好的流通起来那有没有更通用的更安全的跨域方案呢没错就是今天的重头戏 —— CORS。 三、CORS 这个方法是目前我个人感觉最简单最安全的方法详细步骤如下1、前端ajax调用前端的代码在jsonp的时候已经写好请往上看第二大节的第一步骤后端接口也是一个很简单的 /api/Login/Token 接口剩下的就是配置跨域了很简单 2、配置 CORS 跨域在 startup.cs 启动文件的 ConfigureServices 中添加services.AddCors(c { // 配置策略 c.AddPolicy(LimitRequests, policy { // 支持多个域名端口注意端口号后不要带/斜杆比如localhost:8000/是错的 // http://127.0.0.1:1818 和 http://localhost:1818 是不一样的尽量写两个 policy .WithOrigins(http://127.0.0.1:1818, http://localhost:8080, http://localhost:8021, http://localhost:8081, http://localhost:1818) .AllowAnyHeader()//允许任意头 .AllowAnyMethod();//允许任意方法 }); }); 基本注释都有大家都能看的懂这里说一下有三个小点需要了解注意1、在定义策略 LimitRequests 的时候源域名应该是客户端 vue 项目的请求的端口域名不是当前API的域名端口。2、上边我们是在 configureService 里配置的策略其实我们在下一步的中间件也可以配置策略这里就不细说了防止混淆。CORS的配置一定要放在AutoFac前面,否则builder.Populate(services);后,你再进行配置会没有效果。 3、启动中间件在启动文件 的 中间件管道配置 Configure 种添加启用Cors中间件服务但是千万要注意顺序。 public void Configure(IApplicationBuilder app)
{ ... app.UseStaticFiles(); app.UseRouting(); app.UseCors();//添加 Cors 跨域中间件 app.UseAuthentication(); app.UseAuthorization(); app.UseEndpoints(endpoints { endpoints.MapControllers(); }); 注意如果你使用了 app.UserMvc() 或者 app.UseHttpsRedirection()这类的中间件一定要把 app.UseCors() 写在它们的上边先进行跨域再进行 Http 请求否则会提示跨域失败。因为这两个都是涉及到 Http请求的如果你不跨域就直接转发或者mvc那肯定报错。 4、运行调试一切正常 至此跨域的问题已经完成辣我们通过分离后的前端的项目工程来访问api已经成功了这里会有两个常见的问题这里简单列举一下5、IIS 部署常见的跨域错误 1、如果遇到了跨域失败的提示比如这样 这个并不一定是没有配置好导致的跨域失败还有可能是接口有错误比如 500了导致的接口异常所以就提示访问有错误。2、可能部署到服务器的时候会出现 Put 和 Delete 谓词不能用的问题。这个很简单是因为 IIS 不支持添加进去进行了在发布好的 web.config 文件里①删除IIS安装的WebDav模块选择你的项目右边有个“模块”双击它找到WebDavModule删除它。modules runAllManagedModulesForAllRequeststrue runManagedModulesForWebDavRequeststrue remove nameWebDAVModule /
/modules
handlers remove nameWebDAV /
/handlers 现在咱们继续聊聊 CORS 的优劣有哪些优势1、支持所有的 Http 谓词请求2、支持多种输出格式主要是json3、可用在生产环境4、同时配置多个前端项目劣势1、配置太偏重后端2、会暴露后端api域名或端口从上边咱们可以看出来CORS 优点还是很多的我们平时的开发基本也是使用的这个应用范围也特别的广泛但是也是有一两个小问题的就比如我们平时开发的时候可能时不时前端vue项目就会修改端口那就只能让后端工程师来修改配置了。亦或者虽然接口数据很正常被获取但是接口地址还是不想暴露出去欸那咋办有办法就说说今天的第二个重头戏 —— Proxy 代理 四、webpack 的 proxy 代理1、Vue-Cli 3.0 新增全局配置文件 vue.config.js vue项目搭建的时候会有一个全局config配置文件在 vue-cli 2.0 脚手架中很明显的把它放到了 config 的一个文件夹中是这样的我们在 index.js 中可以端口号的配置打包之后路径的配置图片的配置 等等但是 vue-cli 3.0 脚手架中去掉了 config 这个文件夹那我们如何配置呢我们可以在项目根目录新建一个 vue.config.js 文件像之前的很多繁琐配置都可以在这个文件里配置啦。官方说明vue.config.js 是一个可选的配置文件如果项目的 (和 package.json 同级的) 根目录中存在这个文件那么它会被 vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段但是注意这种写法需要你严格遵照 JSON 的格式来写。 我们就在根目录下新建该文件然后添加内容 module.exports { // 基本路径 baseUrl: /, // 输出文件目录 outputDir: dist, // eslint-loader 是否在保存的时候检查 lintOnSave: true, // webpack配置 // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md chainWebpack: () {}, configureWebpack: () {}, // 生产环境是否生成 sourceMap 文件 productionSourceMap: true, // css相关配置 css: { // 是否使用css分离插件 ExtractTextPlugin extract: true, // 开启 CSS source maps? sourceMap: false, // css预设器配置项 loaderOptions: {}, // 启用 CSS modules for all css / pre-processor files. modules: false }, // use thread-loader for babel TS in production build // enabled by default if the machine has more than 1 cores parallel: require(os).cpus().length 1, // PWA 插件相关配置 // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa pwa: {}, // webpack-dev-server 相关配置 devServer: { open: true, //配置自动启动浏览器 host: 127.0.0.1,//主机 port: 6688, // 端口号自定义 https: false,//是否开启https安全协议 hotOnly: false, // https:{type:Boolean} proxy: null, // 设置代理 before: app {} }, // 第三方插件配置 pluginOptions: { // ... }
};相应的注释都有主要是配置 devServer 节点从名字上也能看出来这个是 dev 开发环境的服务配置常用来配置我们的端口号 port 还有一个就是 proxy 的设置代理。2、配置 proxy 本地代理 将上边的 proxy: null 注释掉然后修改代理设置 这样我们就把接口地址代理到了本地那代理到本地如何调用呢请往下看。3、修改接口api地址http.js文件还记得我们在 src 文件夹下有一个 api/http.js 文件么这个就是配置我们的 http 请求相关的其他的都不变我们只需要把域名去掉即可或者写上本项目的域名var root /api/;//配置 proxy 代理的api地址其实说白了就是在项目启动的时候在node服务器中是把所有的 /api开头的接口字符串也就是这样的http://localhost:6688/api的都指向了http://xxxx:8081 域名这样就实现了跨域其他任何都不需要变接口的使用还是原来的使用方法这样我们在本地开发的时候就可以获取到后端api数据了不用再去 .net core 中设置跨域CORS了是不是很方便。说句简单的就是把后端的端口给代理到了当前的前端端口实现了跨域就好像 node 服务作为要给代理人的身份来处理。4、本地浏览效果 记得我们修改 vue.config.js 后要重启下服务然后就可以看到项目成功获取数据并代理到本地 可以看到我们已经把远程接口数据 123.206.33.109 成功的代理到了本地 localhost:6688 是不是很简单 5、build 打包发布 IIS 那我们本地开发好了是不是一切都稳妥了呢我们可以试一试通过 build 打包生成 dist 文件夹然后将文件夹拷贝到服务器并配置 IIS 这个很简单就和配置普通静态页面是一样的我们发现虽然页面可以浏览可以渲染证明我们的 vue 已经生效但是却获取不到数据这证明我们上边的 proxy 代理只是适用本地dev开发环境中 虽然这个本地代理的方法很简单特别适合我们独立开发在跨域这一块完全不用和后端做处理但是服务器生产环境是不行的那怎么办既然本地的 node 服务可以代理那打包后的 html 静态项目有没有一个人站出来充当代理的角色呢哎还真有就是Nginx 五、基于Nginx 的反向代理这篇文章仅仅是如何使用 Nginx 作为一个反向代理服务器具体的深入原理以及负载均衡器等等我会在以后的微服务系列中说到不知不觉又给自己玩了一个坑?。1、Nginx的代理工作原理反向代理Reverse Proxy方式是指以代理服务器来接受 Internet上 的连接请求然后将请求转发给内部网络上的服务器并将从服务器上得到的结果返回给 Internet 上请求连接的客户端此时代理服务器对外就表现为一个服务器。通常的代理服务器只用于代理内部网络对 Internet 外部网络的连接请求客户机必须指定代理服务器并将本来要直接发送到 Web 服务器上的 http 请求发送到代理服务器中。不支持外部网络对内部网络的连接请求因为内部网络对外部网络是不可见的。当一个代理服务器能够代理外部网络上的主机 访问内部网络时这种代理服务的方式称为反向代理服务。此时代理服务器对外就表现为一个Web服务器外部网络就可以简单把它当作一个标准的 Web 服务器 而不需要特定的配置。不同之处在于这个服务器没有保存任何网页的真实数据所有的静态网页或者CGI程序都保存在内部的Web服务器上。因此对反向代 理服务器的攻击并不会使得网页信息遭到破坏这样就增强了Web服务器的安全性。总结来说呢就是我们通过 nginx 反向代理服务器处理我们的请求具体的数据处理还是交给 IIS然后得到处理过的数据以后我们再发送给 Internet 请求的客户端这样就不会存在跨域的问题了。 2、Nginx 下载与使用 下载地址http://nginx.org/en/download.html 我选择下载稳定版 1.14 下载好后解压然后就看到根目录下的 Nginx.exe 直接双击即可开启服务然后就会在任务管理器查看到已经启动的 Nginx 代理服务。因为默认的是80端口大家的端口应该都已经被占用所以我们需要修改端口打开 config 文件夹下的 nginx.conf 文件然后修改端口号这个很简单这个时候记得要重启 Nginx 服务你可以采用命令的形式不过我有时候会发现无效我一般使用的时候在任务管理器中把所有的 nginx 进程全部结束然后双击 nginx.exe 开启。这个时候我们直接访问 localhost:8077 就发现已经启动成功了只不过是 nginx 的欢迎页。这个时候你一定好奇为什么仅仅配置下就能访问该端口呢不信的话你可以在 cmd 中 通过 netstat -an 命令来查看 8077 端口是否被使用 发现已经被监听使用如果还不相信你可以创建一个 IIS 项目然后配置 8077 端口发现会报错这也就是说明了8077端口已经被占用准确来说是被 Nginx 占用的所以Nginx 和 IIS一样都是可以作为反向代理服务器来使用从而可以通过监听端口来代理我们的项目的 3、将上文打包后的 dist 文件配置 Nginx 代理1、将我们上边 build 后的 dist 文件放到咱们下载的 nginx 下的 html文件夹 2、配置代理还是我们的 config/nginx.conf 文件打开并配置 本地代理 注意注释是用 # 号不是 // server { listen 8077;#监听端口也就是我们的项目端口 server_name localhost;#服务器主机 location / { root html;#监听文件夹默认是nginx下的html文件夹也可以自定义物理路径 E:\\Nginx\\test index index.html index.htm;#默认首次启动的文件 } #配置本地代理规则 location /api {#名字取一个 api rewrite ^.apb/?(.*)$ /$1 break; #路径重写机制无用但是你也可以自己定义对路由进行变化 include uwsgi_params; proxy_pass http://123.206.33.109:8081; #api接口的域名地址 } 相应的注释已经写好了自己看看就明白了和上边 node 的proxy代理是一个逻辑。4、本地以及服务器发布预览这个时候你再访问 localhost:8077 就能看到我们的项目内容了访问页面也能看到我们的数据了代理成功 这个时候仅仅是本地那服务器行不行呢我们只需要将我们的 nginx 文件夹拷贝到服务器并且双击 nginx.exe 启动代理服务然后就可以啦是不是很简单只需要把http.js 的baseurl 修改一下完全不用修改我们任何的调用接口地址也不用修改前端代理更不用修改后端配置就可以实现跨域。 5、刷新后出现 404如果是IIS部署1、如果你是 IIS 部署就使用 hash 模式2、如果用IIS也想用 history 模式可以配置 URL重写https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子 如果是Nginx部署1、不过如果用 nginx 的话可以利用 404 页面的机制将 index.html 页面 copy 一份重命名成 404.html 即可 2、如果不想添加一个 404 文件的话 就直接修改下 nginx 的配置文件推荐官方解释https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90 六、结语 0、不跨域 —— 前后端写在一起我还真的有一个项目是把Vue 和 .net 整合到一起了不说明 ❤ 七、Githubhttps://github.com/anjoy8/Blog.Core
