zoukankan      html  css  js  c++  java
  • 前端跨域的几种处理方式

    什么是跨域?

      浏览器想服务器发送请求,因为Ajax只能在同源策略下使用,不能请求不同接口的数据,例如浏览器接口8080请求接口3000的数据,是请求不到数据的会报错,这时就需要跨域来解决跨域就是解决此问题。以下三种方式是我所熟悉的前端跨域请求方式

      从创建文件到访问的步骤
        后台文件接口为 3000,前端接口为 8080

        一、在 cmd 中 输入 cnpm i -S webpack webpack-cli,搭建一个前端的工程

         创建结果如下

        二、在当前文件夹下创建 webpack.config.js默认配置文件,进行配置。

           配置完毕后文件创建如下:(server.js为后端请求接口文件)

          创建一个server.js文件,进行简单后台接口的编写,在cmd中 使用 node server.js 就可以启用后台接口

            启用后台接口 node server.js,在浏览器中输入 http://127.0.0.1:3000/user,显示:

     

             这时我们的后台接口就基本配置完毕。然后在 index.js 中的进行ajax请求,这时会显示报错。

             1、使用 webpack 中代理的方式的来请求后台接口  

                在webpack.config.js配置中写入红框中的代码,

             以 /api 的代理方式来实现跨域请求

             2、后端 cors 处理的方式,在server.js文件中加入以下代码,这种方式是后端处理,最简便的方式,不需要前端做任何处理方式就能请求,只需要在后端添加以下代码就可以,

      

             3、webpack插件处理的方式,也是中间件,在server.js文件中加入以下代码,重新启动 node server.js,在浏览器中启动http://127.0.0.1:3000,会发现同时也请求到了数据

      

      还有jsonp 的请求方式、vue中的axios的请求方式等等,这么多的跨域方案各有各的好处,没有最好,只有最适合,根据场景选择适合自己的方式;

  • 相关阅读:
    实变函数资料目录
    高等代数资料目录
    数学分析资料目录
    各大高校数学分析高等代数考研试题参考解答
    高等代数习题集/资料/答案/视频讲解等目录
    数学分析习题集/资料/答案/视频讲解等目录
    数学分析习题集/资料/答案/视频讲解等目录
    Evans 偏微分方程目录
    Berkeley 常微分方程问题集目录
    245道2020年数学分析/91道2020年高等代数考研试题题目分类目录
  • 原文地址:https://www.cnblogs.com/wj000/p/12269693.html
Copyright © 2011-2022 走看看