跨域的解决办法

跨域产生的原因

产生跨域的原因：同源策略

同源策略：是对ajax的一个主要约束，它为通信设置了“相同的域、相同的端口号、相同的协议”这一限制

跨域产生的5中情况

http://a.com 和  http://b.com 不允许访问(不同域)
http://a.com 和  https://a.com   不允许访问(同一域名，不同协议)
http://a.com 和  http://a.com:8080   不允许访问(同一域名，不同端口)
http://a.com 和  http://192.168.1.1  不允许访问(域名和域名对应的ip不同)
http://a.a.com 和  http://b.a.com   不允许访问(主域名相同，子域名不同)

跨域产生的报错截图：

使用场景： 

因为目前基于web技术开发的项目主要是前后端分离的项目，即后端提供数据访问的接口，前端调取接口并实现数据展现和ui交互，这里后端提供的接口通常为线上真实的接口，本地访问通常是会产生跨域情况。

跨域的解决方案：

1、jsonp

2、代理（前端代理，后端代理）

3、cors

jsonp方案：

jsonp实现原理：主要是利用动态创建script标签（src属性）请求后端接口地址，然后传递callback参数，后端接收callback，后端经过数据处理，返回callback函数调用对的形式，callback中的参数就是json。

前段代理：

前段代理在vue项目中主要是通过vue脚手架中的config中的index文件来配置的，其中有个proxyTable来配置跨域的，前端代理核心实现通过http-proxy-middleware插件来实现的，vue2.x和vue3.x脚手架代理跨域实现原理一样。

cors方案：

CORS全称叫跨域资源共享，主要是后台工程师设置后端代码来达到前端跨域请求的

CORS的原理：CORS定义一种跨域访问的机制，可以让ajax实现跨域访问。CORS允许一个域上的网络应用向另一个域提交跨域ajax请求。实现此功能非常简单，只需有服务器发送一个响应标头即可。

vue项目中实现跨域，在根目录下创建vue.config.js文件，在文件内配置以下内容：

module.exports={
    lintOnSave:false,
    runtimeCompiler:true,
    devServer:{
        //port:9999,
        proxy:{
            //此处写跨域配置
            "/api":{
                target:"",//代理网址
                //ws:true,
                changeOrigin:true,//允许跨域
                pathRewrite:{
                    "^/api":'',//rewrite path //重写
                }
            }
        }
    }
}