解决前端开发环境中的的跨域问题

Youngs 发布于2019-08-02 15:21 / 2506人阅读

摘要：二解决思路知道是客户端浏览器为了安全使用同源策略导致的，而服务端是没有这个限制的，那我们就只能通过服务端进行跨域了。哈哈，这也是为啥后端和生产环境下比较少听说跨域的问题，所以这里介绍开发环境中的几种方法。

一、为什么会有跨越问题
是客户端浏览器同源策略导致的，就是浏览器不允许不同源的站点相互访问。试想一下要是没有这个，那站点里的安全信息如cookie，账号/密码等是不是很容易被其它站点获取。
二、解决思路
知道是客户端浏览器为了安全使用同源策略导致的，而服务端是没有这个限制的，那我们就只能通过服务端进行跨域了。不管是jsop,core，还是代理的方式，都是需要服务配合的。哈哈，这也是为啥后端和生产环境下比较少听说跨域的问题，所以这里介绍开发环境中的几种方法。
三、解决方案
1.完全交予后端解决，配值请求头信息（core），前端什么都不用做,如express.js中配置如下，其它后端语言同理

app.all("*", function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    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");
    next();
});

2.使用nginx反向代理，在配置文件nginx.conf中找到server{}对象，更改项目地址root和配置代理地址proxy_pass，这个方法适合前端静态文件使用：

location / {
    root   D:/browseClient/dist;  #自己的前端项目地址
    index  index.html index.htm;
}
#解决跨域
location /api {                                # 自定义nginx接口前缀
    proxy_pass   http://127.0.0.1:3000;            # 后台api接口地址
            proxy_redirect default;      
    #设置主机头和客户端真实地址，以便服务器获取客户端真实IP
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;   
}

3.如果使用vue-cli搭建的项目，可以直接使用proxyTable模块，项目框架已经集成，找到配置文件在/confif/index.j，如下配置

//代理配置表，在这里可以配置特定的请求代理到对应的API接口
proxyTable:{
    "/adv":{
        target:"http://127.0.0.1:3000",//需要访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            "^/adv": "/"//路径的替换规则
        }
    }，
    "/user":{
        target:"http://127.0.0.1:3000",//访问的服务器地址
        changeOrigin:true,//true为开启代理
        pathRewrite:{
            "^/user": "/"//路径的替换规则
        }
    }
}

显然，大部分情况我们不可能为每个api接口都在这加一个规则，所以更好的配置是：

proxyTable: {
    "**": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,   //允许跨域
    }
}

或者

proxyTable: [{
    context: ["/**"]，
    target: "http://127.0.0.1:3000"，
    changeOrigin: true,  //允许跨域
}]

是不是方便了很多
4.其它，如jsonp是通过接口回调的方式实现跨域，这个现在已经用的少了。window.postMessage() 是HTML5的一个接口，专注实现不同窗口不同页面的跨域通讯。这些是对单个接口或者页面层面的跨域，使用也简单就不详细说了。

混合云服务器托管前端开发环境关于安卓开发环境问题前端开发环境搭建跨域问题

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

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

那些年曾谈起的跨域

摘要：在中，在不同的域名下面进行数据交互，就会遇到跨域问题，说到跨域首先要从同源说起，浏览器为了提供一种安全的运行环境，各个浏览器厂商协定使用同源策略。在上面说过是不受同源策略限制的，但是出于安全原因，浏览器限制从脚本内发起的跨源请求。对于前端开发来说跨域应该是最不陌生的问题了，无论是开发过程中还是在面试过程中都是一个经常遇到的一个问题，在开发过程中遇到这个问题的话一般都是找后端同学去解决...

galois 2019-08-23 18:13 评论0 收藏0
用 Nokitjs 解决前端开发中的跨域问题

摘要：用解决问题是一个，和等框架类似，用于开发应用或网站，这里不去比较各个框架的优劣，而是去解决跨域问题。问题在开发一些「单页应用」时，通常会使用 Ajax 和服务器通讯，比如 RESTful API，通常「前端」和「服务端 API」可能是有不同人员在负责，也不在同一个工程下，那么开发过程中就可能会遇到跨域的问题，比如 Chrome 会在 console 中看到这样的错误消息: XMLH...

voidking 2019-08-19 18:07 评论0 收藏0
用 Nokitjs 解决前端开发中的跨域问题

摘要：用解决问题是一个，和等框架类似，用于开发应用或网站，这里不去比较各个框架的优劣，而是去解决跨域问题。问题在开发一些「单页应用」时，通常会使用 Ajax 和服务器通讯，比如 RESTful API，通常「前端」和「服务端 API」可能是有不同人员在负责，也不在同一个工程下，那么开发过程中就可能会遇到跨域的问题，比如 Chrome 会在 console 中看到这样的错误消息: XMLH...

fobnn 2019-08-01 15:11 评论0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域请求详解从繁至简前端掘金什么是为什么要用是的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。异步编程入门道典型的面试题前端掘金在界中，开发人员的需求量一直居高不下。 jsonp 跨域请求详解——从繁至简 - 前端 - 掘金什么是jsonp？为什么要用jsonp?JSONP(JSON with Padding)是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题...

Rango 2019-08-20 17:15 评论0 收藏0