多方面解决请求不同源跨越问题

多方面解决请求不同源跨越问题

---

​ 同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限制以下几种行为：

• Cookie、LocalStorage 和 IndexDB 无法读取
• DOM和JS对象无法获得
• AJAX 请求不能发送

一、前端开发中利用代理解决

—代理服务器的IP地址和请求方的IP地址是相同的（同源）—

解决方法：

1. 一般项目中，使用webpack，需要有webpack-dev-server，并在webpack.config.js中配置

   devServer: {
     contentBase: 'dist',
     port: 8080,
     inline: true,
     overlay: true,
     proxy: {
       '/api': { // 代理的路径
         target: 'https://baidu.com/', // 代理的目标服务器IP地址
         changeOrigin: true,
         pathRewrite: {
           '^/api': '' // 重写请求路径 将/api替换成空字符
         }
       }
     }
   }
   

2. vue脚手架上，在vue.config.js中配置

   module.exports = {
     devServer: {
       proxy: {
         '/api': {  // 代理的路径
           target: 'https://misterma.com/', // 代理的目标服务器IP地址
           changeOrigin: true,
           pathRewrite: {
             '^/api': '' // 重写请求路径 将/api替换成空字符
           } 
         }
       }
     }
   }
   

3. 在react脚手架上，在package.json中配置

   • 简单用法：{ "proxy": "代理的目标服务器IP地址" }（只能代理一个目标IP地址，优先匹配前端资源）

   • 标准用法：

     1. 在src目录下创建setupProxy.js配置文件（该配置文件的内容会被脚手架自动整合）

     2. 编写setupProxy.js配置具体代理规则：

        // common Js规范 react脚手架找到配置文件加到webpack里边用的node.js的语法
        const { createProxyMiddleware } = require('http-proxy-middleware') // 该包脚手架以默认安装了
        
        module.exports = function(app) {
            app.use(
                createProxyMiddleware('/api1', { //  遇到/api1的前缀请求，就会触发该代理配置
                    target: 'http://localhost:5000', // 请求的第三方接口
                    changOrigin: true, // 控制服务器收到的请求头中的host字段的值
                    pathRewrite: {
                        '^/api1': '' // 重写请求路径 将/api1替换成空字符
                    }  
                })
            )
        }
        /**
         * changOrign设置为true时，服务器收到的请求头重的host为： localhost:5000
         * changOrign设置为false时，服务器收到的请求头中的host为：localhost:3000
         */
        

二、服务器设置跨域

1. nodejs中设置允许跨域（CORS协议）：

   const express = require("express");
   const app = express();
   
   //设置跨域访问
   app.all("*",function(req,res,next){
       //设置允许跨域的域名，*代表允许任意域名跨域
       res.header("Access-Control-Allow-Origin","*");
       //允许的header类型
       res.header("Access-Control-Allow-Headers","content-type");
       //跨域允许的请求方式 
       res.header("Access-Control-Allow-Methods","DELETE,PUT,POST,GET,OPTIONS");
       if (req.method.toLowerCase() == 'options')
           res.send(200);  //让options尝试请求快速结束
       else
           next();
   })
   

2. nodejs服务器设置代理：

   npm install --save-dev http-proxy-middleware
   

   const express = require('express')
   const { createProxyMiddleware } = require('http-proxy-middleware')
   
   const app = express()
   
   app.use('/api', createProxyMiddleware({
     target: 'http://www.example.org', // 代理的目标服务器IP地址
     changeOrigin: true, // 默认false，是否需要改变原始主机头为目标URL
     ws: true, // 是否代理websockets
     pathRewrite: {
       '^/api': '' // 重写请求路径 将/api替换成空字符
     }
   }))
   
   app.listen(3000)
   
   

   createProxyMiddleware(’/api’, optionsObj)的第一个参数可以省略，省略则匹配所有；可以设置为数组匹配多个路径；

   也可以设置为函数自定义匹配规则。

   细粒度的匹配可以使用通配符匹配：

   • createProxyMiddleware(’**’, {…})` 匹配任何路径，所有请求将被转发；
   • createProxyMiddleware(’**/*.html’, {…})` 匹配任何以.html结尾的请求；
   • createProxyMiddleware(’/*.html’, {…})` 匹配当前路径下以html结尾的请求；
   • createProxyMiddleware('/api/**/*.html', {...}) 匹配/api下以html为结尾的请求；
   • createProxyMiddleware(['/api/**', '/ajax/**'], {...}) 组合
   • createProxyMiddleware([’/api/’, '!/bad.json’], {…})不包括**/bad.json`