跨域问题及解决办法

r囧r小猫 2022-08-29 10:11 254阅读 0赞

# 跨域问题及解决办法 #

三要素：协议、域名、端口

三要素有一个不同就是跨域

默认端口不显示

#### 跨域解决办法 ####

*  Webpack proxy——>有个问题，但是打包之后，就没有这个proxy了
 *  JSONP 本质上是get请求 不安全——》前端的处理方式，也需要后端的支持
 *  Nginx——》反向代理——》其实就是中间件
 *  webpack plugin ——》中间件
 *  CORS（后端）

后端需要写一个函数才能支持JSONP，并且只支持get

**Webpack proxy** ——只能在本地调试使用

*  创建一个文件夹，然后下载webpack和webpack-cli
 *  编写webpack.config.js 文件

var path = require('path');
    var htmlWebpackPlugin = require('html-webpack-plugin')
    module.exports = { 
        // 入口 模块化
        entry : './src/index.js',
        output:{  // 打包的文件目录在哪里
            // 打包之后的文件
            filename:'index.js',
            // 输出的目录在哪里
            path:path.resolve(__dirname,'dist'), // __dirname=>当前目录
            // 公共资源路径
            publicPath:'/'
        },
        devServer:{ 
            proxy:{  // 代理
                '/api':{ 
                    // 以api开头的地址进行拦截，然后代理到target这个地址上去
                    target:'http://localhost:3000',
                    pathRewrite:{ '/api':''} // 去掉api这个前缀
                }
            }
        },
        plugins:[
            new htmlWebpackPlugin({ 
                filename:'index.html',
                template:'index.html'
            })
        ]

*  入口文件index.js ——》这就是我们的首页，通过ajax发送一个请求

console.log('log');
    // 前端写一个ajax请求
    let xhr = new XMLHttpRequest();
    // 接口方式 get post put delete trace 
    xhr.open('get','/api/user',true); // 这里实际上请求的是webpack（自己），并不是后端服务
    xhr.onload =function(){ 
        // 如果请求成功就打印对应的数据
        console.log(xhr.response);
    };
    xhr.send()
    
    // 这就是我们的首页，通过ajax发送一个请求

*  我们还需要从服务器那数据，这时候我们可以用node中的express库写一个服务器
    
    这就是服务器代码 node server.js

// 引入依赖包
    let express = require("express");
    let app= express();
    
    app.get('/user',(req,res)=>{ 
        res.json({ name:'bella'})
    });
    
    // 启动接口
    app.listen(3000,function(){ 
        console.log("服务启动，端口3000")
    })

![在这里插入图片描述][853db045ba5c41db93e9bd70acf1cf85.png]  
此时我们就获取到从服务器请求的数据了

如果我们一开始在HTML文件中引入`<script src="./dist/index.js"></script>`会报错，因为出现了跨域。

我们在没有使用webpack proxy的时候，我们前端页面的端口是8080，服务器的接口是3000，这肯定是跨域了，所以我们将前端index.js文件中的发送请求的路径代理到我们服务器的路径，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]

## CORS ##

可以在后端配置——也就是allowCrossDomain里面的内容

服务器代码 server.js

// 引入依赖包
    let express = require("express");
    let app= express();
    
    // cors
    // 后端允许哪些请求
    var allowCrossDomain = function(req,res,next){ 
        // 访问控制请求的源 请求源 ajax http://localhost:8080
        res.header("Access-Control-Allow-Origin","*");
        // 允许访问请求头 意思要有某个值才能允许你访问
        res.header("Acess-Control-Allow-Headers","*");
        // 允许请求的方法 get put post 加*号代表允许所有的
        res.header("Access-Control-Allow-Methods","*");
        next(); // 下一步
    }
    
    app.use(allowCrossDomain);
    
    app.get('/user',(req,res)=>{ 
        res.json({ name:'bella'})
    });
    
    // 启动接口
    app.listen(3000,function(){ 
        console.log("服务启动，端口3000")
    })

然后将前端中的接口改为后端接口就可了，但是要将webpack.config.js中的代理给删掉

index.js文件 我们前端的代码用来发送数据

console.log('log');
    // 前端写一个ajax请求
    let xhr = new XMLHttpRequest();
    // 接口方式 get post put delete trace 
    xhr.open('get','http://localhost:3000/user',true); // 这里实际上请求的是webpack（自己），并不是后端服务
    xhr.onload =function(){ 
        // 如果请求成功就打印对应的数据
        console.log(xhr.response);
    };
    xhr.send()
    
    // 这就是我们的首页，通过ajax发送一个请求

## 通过webpack插件的方式实现跨域 ##

要是后端不配合使用cors，我们就可以使用Nginx反向代理或者插件的形式来做

> npm install -S webpack-dev-middleware

这个中间件可以将前端和后端的服务绑在一起  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 1]

[853db045ba5c41db93e9bd70acf1cf85.png]: /images/20220829/53dab501bc274e1292e3c2ac2b87e331.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: /images/20220829/b2a60628de6142728c9c0eee1b319cac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 1]: /images/20220829/8af5394e1b1e47e09a9a6afbb2604746.png