跨域问题及项目总结

我就是我 2021-09-13 15:56 302阅读 0赞

## 什么是跨域 ##

跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。

## 同源策略 ##

同源策略它是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果
    缺少   同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器
    都会使用这个策略。

**同源指：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]  
**同源策略限制的情况：**

1、Cookie、LocalStorage 和 IndexDB 无法读取

2、DOM 和 Js对象无法获得

3、AJAX 请求不能发送

**注意**：对于像 img、iframe、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。

## JSONP 跨域（只针对get请求） ##

JSONP 实现跨域的流程：

// 1. 定义一个 回调函数 handleResponse 用来接收返回的数据
    function handleResponse(data) { 
        console.log(data);
    };
    
    // 2. 动态创建一个 script 标签，并且告诉后端回调函数名叫 handleResponse
    var body = document.getElementsByTagName('body')[0];
    var script = document.gerElement('script');
    script.src = 'http://www.laixiangran.cn/json?callback=handleResponse';
    body.appendChild(script);
    
    // 3. 通过 script.src 请求 `http://www.laixiangran.cn/json?callback=handleResponse`，
    // 4. 后端能够识别这样的 URL 格式并处理该请求，然后返回 handleResponse({"name": "laixiangran"}) 给浏览器
    // 5. 浏览器在接收到 handleResponse({"name": "laixiangran"}) 之后立即执行 ，也就是执行 handleResponse 方法，获得后端返回的数据，这样就完成一次跨域请求了。

**优点**

*  使用简便，没有兼容性问题，目前最流行的一种跨域方法。

**缺点**

*  只支持 GET 请求
 *  由于是从其它域中加载代码执行，因此如果其他域不安全，很可能会在响应中夹带一些恶意代码。
 *  要确定 JSONP 请求是否失败并不容易。虽然 HTML5 给 script 标签新增了一个 onerror  
    事件处理程序，但是存在兼容性问题。

## 项目总结 ##

## 搜索框插件 ##

链接：https://ext.dcloud.net.cn/plugin?id=866  
**在组件中更改搜索引擎**  
![在这里插入图片描述][20200326122643969.png]  
**在组件中更改placeholder字体颜色**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]  
**更改input搜索框背景颜色（半透明）**  
在首页使用组件的地方：  
![在这里插入图片描述][20200326123134685.png]  
**更改搜索框长度**  
![\*\*加粗样式\*\*][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]  
**效果图如下：**  
![在这里插入图片描述][20200326123602393.png]

## 注意 ##

*  uniapp项目中不能使用标签选择器，且class类名最好根据功能来定
 *  尽量用flex代替浮动，直接在大盒子里用display:flex即可
 *  要严格根据原图的尺寸大小来写
 *  相似的数据要写成数组循环渲染
 *  页面底部用tabBar

## 用gitee上传代码步骤 ##

官网：https://gitee.com/  
在码云gitee新建仓库  
在项目文件夹中右键打开git bash here,执行命令：  
cd zhihuribao // 在本地命令行中切换到自己的项目中  
git init // 初始化仓库（想当于新建本地仓库）  
git add . // 把所有文件提交到暂存区  
git commit -m ‘init’ // 提交到本地仓库  
git remote add origin https://github.com/xfee/zhihuribao.git // 和远程仓库建立连接，地址换成自己的  
git push -u origin master // 推送到远程仓库

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/f0b3692b99094345bf3290a3890a6c43.png
[20200326122643969.png]: /images/20210913/e0ded421a2954d08880fdd80fe2ac91a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/05a5407d54e6463c8cb97d5e6c104aa3.png
[20200326123134685.png]: /images/20210913/3a12032fc6dc41768d512458b9a48e81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]: /images/20210913/d426c0fb4bda4917819422ce483275f7.png
[20200326123602393.png]: /images/20210913/e8a65d0379874c70b467c46d4f81ebea.png