项目跨域解决方案

144 阅读2分钟

前后端分离开发给我带来很多的便利,无论是前端同学还是后端同学对于此种开发方式都是举双手赞成的。因为这样我们后端同学不用被css js这一大堆的前端代码折磨了,前端也不用改个样式要开个后台服务。虽然如此方便,但对于前端还是有些问题需要解决的。比如跨域问题,今天在项目中本地局域网测试移动端,手机浏览器打开会出现跨域(pc端跨域已通过chrome设置解决了)。

1.浏览器设置跨域

在PC端开发,chrome浏览器是我们前端必不可少的开发工具,用chrome解决跨域简单粗暴。

1)右键chrome选择属性

2)选择快捷方式

3)在目标后面空格 加上 --disable-web-security --user-data-dir=C:(--user-data-dir是自定义目录)

打开浏览器,轻松解决跨域问题

2.vue配置文件设置代理

在用vue-cli3构建的前端项目中有vue.config.js文件,在其中添加如下代码

devServer: {   proxy: {        '/apis': {    //将www.example.com映射为/apis
            target: 'https://www.example.com',  // 接口域名
            secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/apis': ''   //需要rewrite的,
            }              
        }
  }}复制代码

详情请参考文章

3.后台设置允许跨域

这种方法是我认为最方便的方法,由服务器决定是否允许跨域,如果允许,服务器会在响应头中设置字段来告诉浏览此次请求合法,则浏览器不会将请求包丢弃,从而完成跨域。再次举个nodejs服务器的栗子:

//设置跨域访问
app.all('*',function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
    if (req.method == 'OPTIONS') {
        res.send(200); /让options请求快速返回/
    }
    else {
        next();
    }
});复制代码

4.设置服务器代理(此处只给出实现方案)

此种方法适用于适应多平台的大型项目,这种方式实际就是将前端ajax请求的地址通过服务器访问。前端代码运行在nodejs中层层的服务器上,nodejd只负责运行前端代码和转发前端请求。例如example.org/index 页面需要访问api.test.com/getNews 来获取最新新闻,我们可以通过在example.org的服务器上面多增加一个接口 kangbiao.org/api?url=api.weibo.com/getNews ,然后再服务器内部,该接口所做的事情就是向api.weibo.com/getNews 发起请求即可,然后将结果返回。

这种方式如果是单类平台不建议使用,维护成本比较高。

作者:暴走的snail
链接:juejin.cn/post/684490…
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。