一笑痕
仙人之下我无敌，
仙人之上一换一。
-
-
vue解决跨域问题 在Vue项目中，跨域问题是一个常见的挑战，尤其是在前后端分离的开发模式下。以下是一些常用的跨域解决方案，涵盖了开发环境和生产环境的不同处理方法： 1. 开发环境下的跨域解决方案 (1) 使用 <span class="ne-text">vue.config.js</span> 配置代理 Vue CLI 提供了 <span class="ne-text">devServer.proxy</span> 配置，可以通过代理服务器转发请求，从而绕过浏览器的同源策略。具体步骤如下： 在项目根目录下创建或修改 <span class="ne-text">vue.config.js</span> 文件。 添加代理配置： module.exports = { devServer: { proxy: { '/api': { // 匹配所有以 /api 开头的请求 target: 'http://your-backend-server.com', // 目标服务器地址 changeOrigin: true, // 允许跨域 pathRewrite: { '^/api': '' } // 重写路径，去掉 /api 前缀 } } } }; 通过这种方式，前端请求会被转发到目标服务器，解决跨域问题[1] [6] [16]。 (2) 使用 <span class="ne-text">vite.config.js</span> 配置代理（适用于Vue 3 + Vite） 如果项目使用 Vite 作为构建工具，可以在 <span class="ne-text">vite.config.js</span> 中进行代理配置： import { defineConfig } from 'vite'; export default defineConfig({ server: { proxy: { '/api': { target: 'http://your-backend-server.com', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') } } } }); 这种方法与 Vue CLI 的代理配置类似[32]. 2. 生产环境下的跨域解决方案 (1) Nginx 反向代理 在生产环境中，可以通过 Nginx 配置反向代理来解决跨域问题。具体配置如下： 修改 Nginx 配置文件（通常位于 <span class="ne-text">/etc/nginx/nginx.conf</span> 或 <span class="ne-text">/etc/nginx/conf.d/default.conf</span>）。 添加反向代理配置： server { listen 80; server_name your-domain.com; location /api/ { proxy_pass http://your-backend-server.com/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } 通过 Nginx 反向代理，前端请求会被转发到目标服务器，解决跨域问题[12] [23]. (2) 后端配置 CORS（跨源资源共享） 如果后端支持 CORS，可以通过设置响应头来允许跨域请求。例如，在 Spring Boot 中可以通过以下方式配置： @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*"); } } 这种方法需要后端支持，适合前后端协作开发的场景[5] [40]. 3. 其他跨域解决方案 (1) JSONP JSONP 是一种通过 <span class="ne-text"><script></span> 标签实现跨域请求的技术，适合处理简单的 GET 请求。但是，JSONP 不支持 POST 请求，且需要后端配合[22] [26]. (2) 使用中间件或第三方插件 一些第三方插件（如 <span class="ne-text">http-proxy-middleware</span>）可以帮助在开发环境中处理跨域问题。这种方法适用于复杂的场景，但需要额外的配置[14] [17]. 总结 在 Vue 项目中，跨域问题可以通过代理、CORS、Nginx 等多种方式解决。开发环境推荐使用 <span class="ne-text">vue.config.js</span> 或 <span class="ne-text">vite.config.js</span> 配置代理，生产环境则建议使用 Nginx 反向代理或后端配置 CORS。选择合适的解决方案，可以显著提升开发效率和用户体验。 -
vue从入门到哭泣 第一章 Vue.js 概要介绍 1.1 Vue.js 介绍 Vue 是什么 主流的渐进式JavaScript 框架。 什么是渐近式 可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似JQuery 库来使用。 也可以使用Vue全家桶框架来开发大型的单页面应用程序 。 使用它的原因 vue.js 体积小，编码简洁优雅，运行效率高，用户体验好。 无Dom操作，它能提高网站应用程序的开发效率。 什么场景下使用它 一般是需要开发单页面应用程序 （Single Page Application, 简称:SPA） 的时候去用 单页面应用程序，如：网易云音乐 https://music.163.com/ 因为 Vue 是 渐进式 的，Vue 其实可以融入到不同的项目中，即插即用 读书笔记 1.2 学习资源 英文官网：https://vuejs.org// 中文官网（中文文档很友好）：https://cn.vuejs.org// 官方教程：https://cn.vuejs.org/v2/guide// GitHub：https://github.com/yyx990803 API文档：https://cn.vuejs.org/v2/api// 不建议买书，官方文档很详细，多查官方文档，因为很多书基本上都是直接抄官方文档的 1.3 发展历史 作者：尤雨溪（微博：尤小右），一位华裔前Google 工程师，江苏无锡人。 个人博客：http://www.evanyou.me// 新浪微博：http://weibo.com/arttechdesign 知乎：https://www.zhihu.com/people/evanyou/activities2013年12月8号在 GitHub 上发布了0.6 版 2015年10月份正式发布了 1.0 版本，开始真正的火起来 2016年10月份正式发布了 2.0 版 2019.4.8号发布了 Vue 2.5.10 版本https://github.com/vuejs/vue/releases1.x 版本老项目可能还在用，新项目绝对都是选择2.x 1.4 对比其他前端JS 框架 Angular 2009 年诞生的，起源于个人开发，后来被 Google 收购了。 核心技术： 模板 和 数据绑定 技术，体验越来越差，走下坡路了。 React 2013年5月开源的，起源于 Facebook 的内部项目，对市场上所有 JS 框架都不满意，于是自已写了一套。 核心技术： 组件化 和 虚拟DOM 技术。 Vue.js 吸收了上面两个框架的技术优点。 使用情况： BAT 级别的企业：React 最多> Angular > Vue.js 中小型公司：Vue.js 更多一些，有中文文档学习成本低。 Vue 不支持IE8 及以下版本，因为Vue 使用了IE8 无法模拟ECMAScript 5 特性。 推荐使用最新谷歌浏览器。 第二章Vue 核心技术 2.1 Vue 入门开发 2.1.1 创建工程 2.4 模板数据绑定渲染 可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成 {{xxxx}} 双大括号文本绑定 v-xxxx 以 v- 开头用于标签属性绑定，称为指令 在 vue-01-core 目录下新建一个页面： 02-模板数据绑定渲染.html 2.4.1 双大括号语法 {{}} 格式： {{表达式}} 作用： 使用在标签体中 用于获取数据可以使用 JavaScript 表达式. 案例源码： <body> <div id="app"> <h3>1、双大括号输出文本内容</h3> <!--文本内容--> <p>普通文本：{{ message }}</p> <!--使用JS表达式--> <p>JS表达式：{{ number + 1 }}</p> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { message: 'haha', number: 1 } }) </script> </body> 2.4.2 一次性插值 v-once 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。 一次性插值 v-once 这个将不会改变: {{ message }} ## 2.4.3 输出HTML指令 v-html 格式： v-html='xxxx' 作用： + 如果是HTML格式数据，双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用 v-html 指令。 + Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染。 XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。 XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。 案例源码： ```html 3、v-html 指令输出真正的 HTML 内容 双大括号：{{ contentHtml }} v-html指令： var vm = new Vue({ el: '#app', data: { message: 'haha', number: 1, contentHtml: '红色字体内容' contentHtml: '红色字体内容> alert("hello vue")' } }) ```