关于前端跨域的一次总结

以前对于跨域,一直很模糊,遇到的也不知道为什么,怎么去解决?于是自己研究了一下,怎么去解决这个问题!

01:为什么产什么跨域?

跨域是由于浏览器的同源策略产生的,确定一点这个东西是有浏览器产生的,和后端没有什么多大关系。

02:怎么解决?

既然是浏览器产生的,是不是可以绕过浏览器,是不是就可以解决了

03:解决方案

I: 反向代理nginx
II:中间服务转发
III:后端设置允许跨域(现在流行和常用方式)

反向代理nginx
下载并安装ngix,解压,其中默认前端静态文件放置在html文件中(当然你可以创建新的文件夹,需要在,conf文件夹下的nginx.conf中修改配置)
关于前端跨域的一次总结_第1张图片

修改配置文件conf下的nginx.conf

访问地址是 IP.com/路径
location / { 

            root   html;     // root静态文件所在的目录 html

            index  index.html index.htm; // 加载的文件index.html或者是index.htm

  }

 

 #代理地址(前端请求接口,通过接口中的字段/api匹配,代理到http://192.168.10.117:8152/api/login 上面)

 location /api {

     proxy_pass http://192.168.10.117:8152/api/login;

 }

前端接口此时使用 /api/login,不要在添加上ip了

关于前端跨域的一次总结_第2张图片

中间服务转发
这里使用的是node中间介,中间介设置允许跨域,然后前端去请求该node服务地址,node服务再去请求你的目标地址,然后node会去请求你的目标地址(红框是目标地址),然后将得到的结果,在返回给前端,则解决了跨域(前端请求的地址是node服务,不是目标,别弄错了)
前端请求

关于前端跨域的一次总结_第3张图片

 node中转服务

const express = require('express');
const superagent = require('superagent');
const app = express();

// 只针对options 请求设置
// app.options('*', function (req, res) {
//   res.header("Access-Control-Allow-Origin", "*");
//   res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, token, Accept, X-Requested-With');
//   res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
//   res.send();
// });

// 只针对post 请求设置
// app.post('/', function (req, res) {
//   res.header("Access-Control-Allow-Origin", "*");
//   res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, token, Accept, X-Requested-With');
//   res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
//   res.send(JSON.stringify({ a: 'post 请求' }));
// });

// 对所有请求,设置
app.all('*', function (req, res) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Headers', 'Content-Type, token , X-CSRF-Token'); // 设置允许的请求字段token , X-CSRF-Token
  res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");

  // 从请求中获取,对应的token 和 x-csrf-token字段,然后转发给目标请求带过去
  let token = req.headers.token || null;
  let xCsrfToken = req.headers['x-csrf-token'] || null;

  let qut = superagent.get('http://192.168.10.117:8080/ws/submc/package/llhl/tree?hangEquips=true').set('Cookie', token).set('X-CSRF-Token', xCsrfToken);
  qut.end(function (err, response) {
    if (err || !response.ok) {
      res.send('error');
    } else {
      res.send(response.body);
    }
  });

});
app.listen(3500);

后端设置允许跨域(现在流行和常用方式)

此处是模仿的后端使用的node,(你也可以php,java...),在后端设置允许的请求,请求方法,请求方式等等,此时前端则可以直接请求该服务地址,获取到数据

关于前端跨域的一次总结_第4张图片

当然还有其他的方式,iframe等等,这里目前自己测试稿了一下,解决跨域问题!如有不对请大神纠正,多多交流

你可能感兴趣的:(js,axios,前端)