1、同源的定义
同源策略:是一个重要的安全策略,用于限制一个origin的文档或它加载的脚本如何能与另一个源的资源进行交互。(它能够帮助阻隔恶意文档,减少可能被攻击的媒介)
同源:就是两个url的protocal(协议)、port(主机)、host(端口)相同
不同源:就是两个url中三要素(协议、域名、端口)有一个不同,即为不同源。
举个栗子:
http://www.bilibili.com/admin/index.html
其中:http(协议)、www.bilibili.com(域名)、80(端口)
同源 | url | 原因 |
同源 | http://www.bilibili.com/user/index.html |
只是资源路径不一样而已 |
不同源 | https://www.bilibili.com/admin/index.html |
http和https的协议不同,所以不同源 |
不同源 | http://www.bilibili.com:8080/admin/index.html |
默认端口80和8080端口不同,所以不同源 |
不同源 | http://store.bilibili.com/admin/index.html |
域名(主机)不同,所以不同源 |
2、如何实现跨域
跨域:就是url三要素不同的时候要实现访问进行的一些操作。
跨域的解决方法有:webpack proxy、nginx反向代理、webpack plugin、jsonp、cors(node后端)等
那么本次我们将介绍其中的三种实现方法:webpack proxy、webpack plugin、cors
(1)webpack proxy
- 首先需要安装webpack以及webpack-cli脚手架。
npm install -S webpack webpack-cli
- 然后进行webpack.config.js配置文件的配置(在此之前你需要安装html-webpack-plugin依赖)
var path = require("path");//添加依赖
var htmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 入口 模块化
entry: "./src/index.js",
output: {
filename: "index.js",
path: path.resolve(__dirname, "dist"),
publicPath: "/", //公共资源路径
},
plugins: [
new htmlWebpackPlugin({
filename: "index.html",//文件
template: "index.html",//模板
}),
],
};
index.js
console.log("log")
package.json中配置(在此之前你需要安装webpack-dev-server依赖)
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
},
进行运行得到:
此时已经实现了简单的跨域。
未完待续。。。