跨域解决方案（易懂，持续更新中……）

wupengyu 发布于2019-07-25 14:24 / 2756人阅读

摘要：跨域总结跨域思路跨域解决方案一般分为两种前端解决，后端解决前端解决方案通过前端解决的思想就是，通过设置中间件把跨域的请求转发一下，其实就是反向代理，比如想要访问豆瓣的接口很，但是如果请求的是就不存在跨域反向代理就是截取之后重写请求将请求转发

跨域总结 1.跨域思路

跨域解决方案一般分为两种：前端解决，后端解决

1.1 前端解决方案

通过前端解决的思想就是，通过设置中间件把跨域的请求转发一下，其实就是反向代理，比如 http://1.2.3.4:8099 想要访问豆瓣的接口
http://www.douban.com/v?a=1很...，但是如果请求的是http://1.2.3.4:8099/api/v?a=1 就不存在跨域

反向代理就是截取 /api 之后重写请求将请求转发到http://www.douban.com/ 服务器上

疑问后续更新：关于转发，到底是几次请求

vue react等项目可以使用 http-proxy-middleware

普通项目就是以下介绍的本地安装nginx 反向代理跨域

1.2 后端解决方案

后端解决方案，一般是需要后端参与

jsonp 回调函数

CORS 需要后端加头部但并不是所有浏览器都支持

纯后端配置nginx反向代理解决跨域

以下介绍

前端解决方案：http-proxy-middleware

后端解决方案：nginx 反向代理

2.前端跨域解决方案 http-proxy-middleware 2.1 搭建环境

# vue-cli 脚手架 
# 安装axios 和 跨域支持的包 http-proxy-middleware
npm i axios --save-dev
npm install --save-dev http-proxy-middleware
#vue-cli 已经把http-proxy-middleware写在项目依赖里面了

2.2 正常请求存在跨域

# 在豆瓣API上随便找一个接口做测试，以一下接口为例
https://api.douban.com/v2/book/1220562

下图浏览器访问接口请求成功

Snip20180806_8.png

下图 vue项目中请求接口

Snip20180806_14.png

下图代码中访问接口存在跨域

Snip20180806_9.png

2.3 使用http-proxy-middleware

下图使用http-proxy-middleware,配置 config/index.js

Snip20180806_11.png

下图跨域成功

Snip20180806_10.png

3.后端跨域解决方案本地配置nginx解决跨域 3.1 mac/vmware/设置共享文件

在虚拟机上找到设置，选择共享文件夹

mac vmware想使用共享文件必须安装vmware-tools

2.1 在虚拟机关闭状态下，选择虚拟机，安装vmware-tools
2.2 在ubuntu中直接使用 apt 安装之后会介绍

安装vmware-tools之后查看 mnt文件下是否有hgfs文件

3.1 有hgfs说明已经有共享文件的挂载点
3.2 如果没有hgfs文件说明安装的vm-tools可能和ubuntu版本有冲突

设置共享目录

# 查看当前设置的共享文件
#sudo vmware-hgfsclient

# 上述命令可能由于没有安装包报错，所以先安装一下包
# apt-get install open-vm-tools
# apt-get install open-vm-tools-desktop
# apt-get install open-vm-tools-dkms

# 自己手动创建hgfs并挂载
# mkdir /mnt/hgfs
# vmhgfs-fuse .host:/ /mnt/hgfs

# 使用文件查看是否有权限进入 /mnt/hgfs 如果没有使用一下命令
# sudo vmhgfs-fuse .host:/ /mnt/hgfs -o allow_other -o nonempty

# 每次进入系统都需要自己mount 可以配置/etc/fstab

.host:/    /mnt/hgfs       vmhgfs     defaults  0  0

完成以上步骤，你会发现 /mnt/hgfs/XXX XX 为你设置的共享目录

3.2 配置nginx 3.2.1 修改nginx默认服务器根目录

修改配置文件位置：vim /etc/nginx/sites-available/default

location / {
    # 配置共享文件的位置
    root /mnt/hgfs/ftp;

    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;
}

3.2.2 访问http://XXX 查看配置是否生效（403错误）

403错误可能有两种情况，不要误以为真的没有权限

配置的共享文件下是否有indx.html，没有的话会报错403 Forbidden

真的没有权限需要修改一下配置 chrod 修改权限

解决Nginx出现403 forbidden

相当良心的解决方案

3.2.3 配置反向代理

我用的豆瓣随便的一个接口来测试的

location /api{
    # 重写
    rewrite  ^.+api/?(.*)$ /$1 break;
    # 配置代理
    proxy_pass   https://api.douban.com;
}

3.3 测试跨域




    
    
    Title

3.4 浏览器测试跨域，跨域成功

Snip20180805_4.png

Snip20180805_5.png

Snip20180805_6.png

Snip20180805_7.png

参考

安装vmtools之后在/mnt目录下没有hgfs文件夹

vmware设置共享文件夹

虚拟机找不到/mnt/hgfs挂载目录

云服务器 GPU云服务器 js跨域解决方案跨域解决办法 js ajax跨域解决方案 js跨域访问js解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40063.html

网站部署

摘要：就鹿晗宣布恋情导致微博宕机事件浅谈大型网站高可用性架构中午吃饭刷着刷着微博发现微博突然挂了。用户在使用浏览器访问一个网站时需要先通过协议向服务器发送请求，之后服务器返回文件与响应信息。 webpack：从入门到真实项目配置自从出现模块化以后，大家可以将原本一坨代码分离到个个模块中，但是由此引发了一个问题。每个 JS 文件都需要从服务器去拿，由此会导致加载速度变慢。Webpack 最主...

endless_road 2019-06-24 17:57 评论0 收藏0
优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0
前端基础入门

摘要：手把手教你做个人火的时候，随便一个都能赚的盆满钵满，但是，个人没有服务端，没有美工，似乎就不能开发了，真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程，全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能，不需要依赖 flash。...

shinezejian 2019-08-22 13:51 评论0 收藏0
跨域解决方案（史上最易懂）

摘要：跨域总结跨域思路跨域解决方案一般分为两种前端解决，后端解决前端解决方案通过前端解决的思想就是，通过设置中间件把跨域的请求转发一下，其实就是反向代理，比如想要访问豆瓣的接口很会有跨域问题，但是如果请求的是就不存在跨域反向代理就是截取之后的请求跨域总结 1.跨域思路跨域解决方案一般分为两种：前端解决，后端解决 1.1 前端解决方案通过前端解决的思想就是，通过设置中间件把跨域的请求转发...

wh469012917 2019-07-25 14:23 评论0 收藏0
通俗易懂讲解跨域的前世今生

摘要：把数据包裹在一个客户端声明的本地的回调函数中，这样可以动态加载一个跨域服务器数据。在本地声明这个动态中的回调函数名称，并且定义该函数，然后通过参数传递到服务器。为什么要跨域我们都知道在浏览器地址栏输入地址的时候可以随便访问一个页面，但是如果你在ajax请求中发出一个xhr请求那么因为浏览器安全策略只有同源的服务器才能处理。这就是同源策略要求协议/域名/端口三者完全一致才能访问 ...

Michael_Lin 2019-08-20 16:10 评论0 收藏0