前端如何解决跨域,配置webpack轻松解决跨域

什么是跨域

首先先介绍一个概念叫同源,同源指的是协议，端口，域名全部相同。反之则是不同源.

同源策略是处于对用户安全的考虑，如果非同源就会受到以下限制：

• cookie不能读取
• dom无法获得
• ajax请求不能发送

解决这种不同源的情况就需要跨域.

常见的跨域方法

1.jsonp

html中src属性默认就支持跨域,jsonp就是利用这个特点实现了跨域请求.

利用script标签的src属性的可以自动跨域的特点，通过get请求发送了一个函数名
给服务器,服务器会返回一个函数的调用给浏览器,并在函数的参数中返回需要的数据,
这样就没有了不同源的限制了。 

2.CORS

需要服务端配合设置一段请求头header
安装cors包 npm i cors -S 
//导入包
const cors = require('cors')
//使用这个包
app.use(cors())

//在浏览器的响应头中就可以看到这个信息
 "Access-Control-Allow-Origin": "*"

3.http proxy(推荐)

//原理就是当用户请求接口时候会通过webpack-dev-server进行转发,因为webpack-dev-server
服务器与服务器之间不存在跨域,所以进行webpack的配置可以实现跨域
//找到webpack.config.dev.js--->找到devServer进行以下配置
devServer:{
    proxy:{
        //请求地址会默认增加上/api,并会转发到http://localhost:9999/api/xxxx
        //下面的配置具体要根据项目的请求路径去设置

        //'/api':'http://localhost:9999'


        //如果请求的路径不需要带上/api那么进行以下配置,前端ajax请求的时候带上axios.get('/api/xxxx')
        '/api':{
            target:'http://localhost:9999',
            pathRewrite:{
                '^/api':''
            }
        }
    }
} 

4.window.domain

将子域和主域的document.domain设为同一个主域 
前提条件：
这两个域名必须属于同一个基础域名
而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

总结:

在开发当中使用webpack-dev-server的HTTP proxy实现跨域是最方便的,非常好用.....

本文地址：https://blog.csdn.net/Cinderellahh92/article/details/107854083