跨域与同源策略

##ajax 跨域 http://baidu.com:80/list
不同协议，不同域名，不同端口以及域名和 ip 地址的访问都会产生跨域。

什么情况下发生跨域

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

  当前url	被请求的url	是否跨域	原因
  http://www.test.com/	http://www.test.com/index.html	否	同源（协议、域名、端口号相同）
  http://www.test.com/	https://www.test.com/index.html	跨域	协议不同（http/https）
  http://www.test.com/	http://www.baidu.com/	跨域	主域名不同（test/baidu）
  http://www.test.com/	http://blog.test.com/	跨域	子域名不同（www/blog）
  http://www.test.com:8080/	http://www.test.com:7001/	跨域	端口号不同（8080/7001）

跨域的解决方案

###什么是jsonp**

  - jsonp是数据格式json的一种使用模式，可以让网页跨域请求数据，利用的是script元素的开放策略，
    网页可以从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。
    - 用jsonp抓到的数据并不是JSON，是任意的JS，使用js语法解析，而无法用JSON解析器解析。
    - JSONP 被称作是一种“让用户利用 script 元素注入的方式绕开同源策略”的方法
##jsonp 实现原理：
      主要是利用动态创建 script 标签请求后端接口地址，然后传递 callback 参数，
      后端接收 callback，后端经过数据处理，返回 callback 函数调用的形式，callback 中的参数就是 json
      （JSONP跨域GET请求是一个常用的解决方案可以利用script标签来向服务器发送请求，服务器端接收到请求后返回一段js代码，
       调用客户端写好的方法，并把JSON数据传入该方法中，客户端即可拿到数据。）

jsonp在哪里使用

  - 在Jquery的api接口中使用，dataType设置为jsonp,
    - 在script标签中通过src调用，需要传递callback回调函数
    - 使用vue-resource插件中 `this.$http.jsonp("url",{}).then(res=>{})` 

jsonp能解决什么问题
- jsonp的数据传输方式是利用了 script标签src属性中的链接可以访问跨域的js脚本 ，
通过src来调用接收服务器返回的js脚本而不是常规的json格式的数据，从而达到接收数据跨域访问的目的。
##优点：
1.浏览器兼容性好，
2.不受同源策略的限制，JSONP可以跨越同源策略；
##缺点：
1.只支持 get 请求方式
2.jsonp在调用失败的时候不会返回各种HTTP状态码。
3.它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
##代码
3000端口访问8000端口
##3000端口view下index.js中
借用jq

<input type="button" value="请求" id="aa" />
 <script>
        function getdata(msg){
              console.log(msg)                
        }
       </script>
<script src="http://127.0.0.1:8000/api?callback=getdata"> </script>
##8000端口
router.get("/api",function(req,res){    
    var d = req.query.callback  // 接收请求来带的参数 
    var  data  = {"id":1,"title":"hello vue" }
    var data2 =   JSON.stringify(data)    
    var s = d + '(' + data2 + ')';
    res.send(s) 

})

##ajax内的jsonp
3000端口view下list.ejs中

 <input type="button"  value="加载数据"  id="load"  />
    <script>          
           $("#load").click("on",function(){                  
                   $.ajax({
                         url:"http://127.0.0.1:8000/list2",
                         method:"get",
                         dataType:"jsonp",
                         success:function(msg){
                              console.log(msg)
                         }
                   })
           })
    </script>
    route路由下面
        router.get('/list', function(req, res, next) {
        res.render('list');
        });

##8000端口
router.get("/list2",function(req,res){
res.jsonp({id:222,content:“aadasdas”,msg:“success”})
})
##后端解决跨域问题端口
3000

 $("#aa").on("click",function(){           
                $.ajax({
                   url:"http://127.0.0.1:8000/aaa",
                   method:"post",
                   success:function(msg){
                        console.log(msg)
                   }
                     
                })
            })
8000端口 Router下index.js
router.get("/aaa",function(req,res){
    // 后端处理跨域的问题 
    res.header("Access-Control-Allow-Origin", "http://127.0.0.1:3000");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By", '3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    res.json({id:333,title:"cors"})
})
##vue中可使用 vue-resource 中jsonp请求方式
    - vue中使用axios，可以配置跨域，在/config/index.js中
        ```js
            '/api':{
                target: "https://api.happyknowshare.cn/",
                changeOrigin: true,
                pathRewrite: {
                '^/api': ''
                },
            }

    ```

###代理（前端代理和后端通常通过 nginx 实现反向代理） 先把请求发送到自己的服务器 自己的服务器程序去请求那个接口 然后再返给自己的前端
前端代理我在vue 中主要是通过vue 脚手架中的config 中的index 文件来配置的，其中有个 proxyTable 来配置跨域的
前端代理核心实现通过 http-proxy-middleware 插件来实现的，vue2.x 和
vue3.x 脚手架代理跨域实现原理是一样的是 CORS
CORS 全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的
CORS 的原理：CORS 定义一种跨域访问的机制，可以让 AJAX 实现跨域访问。
CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。
实现此功能非常简单，只需由服务器发送一个响应标头即可。

优点：无需前端工程师设置，只需后端工程师在请求的页面中配置好，并且支持所有请求方式（例如：get,post,put,delete 等）
缺点：浏览器支持有版本要求，如下：
chrome:13+,firefox:3.5+,IE 11+,edge:12+
注：现在主流框架都是用代理和 CORS 跨域实现的

1. 什么是同源策略

同源策略是浏览器的一种约定，他是浏览器最核心也最基本的安全功能， 同源指的是，
同协议,同域名，同端口，同源策略的目的就是限制不同源的document或者脚本之间的相互访问，以免造成干扰和混乱。

2. 为什么要有同源策略

• 如果没有同源策略，浏览器一些正常功能可能都会受到影响，ajax太灵活了，各种请求说法就发
  ，如果没有同源策略的限制，发到哪里都行，只要你构造好参数和请求路径，那人人都是黑客了，这样会导致各种敏感数据的泄露。

• 那些带src属性的<script><img><iframe><link>等标签是不需要遵守同源策略的，但是通过src加载的资源，
  浏览器限制了javascript的权限，不能进行各种的读写。从而，即使请求发了，敏感数据回来了，

• 有了同源策略限制，A网站就无法随读取非同源的cookie，localStorage等数据，无法向非同源地址发送ajax请求
  HTTP常见状态码有哪些

  • http状态码我们主要分为2xx,3xx,4xx,5xx常见的几类

    • 200 请求成功
    • 301 请求资源移动到新的url地址
    • 403 客户端请求无权限，服务器拒绝请求
    • 404 没有找到文件
    • 500 服务器内部错误，一般是服务端代码有问题
    • 502 网关错误，服务端返回无效响应
    • 503 服务器性能问题导致，无法处理客户端请求

    2** 请求成功，操作被接受并处理
    3** 重定向
    4** 客户端错误
    5** 服务度错误
    ##请描述一下你对webpack的理解
    Webpack 可以看作是一个模块的打包机，它做的事情就是分析你的项目结构，找到了模块以及其它的一些浏览器不能使用的拓展语言。
    并将其转换和打包为合适的格式提供浏览器使用。

##webpack的四个核心概念是什么
四个核心概念：入口(entry)、输出(output)、loader(预处理文件)、插件(plugins)

##为什么要用webpack
Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，
减少了页面的请求

##分别介绍什么是loader、plugin
loader是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中
plugin 在webpack运行的生命周期中会广播出许多事件，plugin可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果