跨域问题及解决办法

跨域问题及解决办法

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

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

默认端口不显示

跨域解决办法

• 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")
})

此时我们就获取到从服务器请求的数据了

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

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

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

这个中间件可以将前端和后端的服务绑在一起