前端的四次元口袋:前端跨域等问题处理

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后端)等

扫描二维码关注公众号,回复: 10920650 查看本文章

那么本次我们将介绍其中的三种实现方法: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"
  },

进行运行得到:

此时已经实现了简单的跨域。

未完待续。。。

发布了78 篇原创文章 · 获赞 5 · 访问量 8282

猜你喜欢

转载自blog.csdn.net/qq_36789311/article/details/105399446