前端跨域方案

跨域的由来

跨域是浏览器整出来的，跟代码无关！谨记：当发生跨域问题时，单靠前端一定不能解决！！！

---

目录

• 一、跨域的产生
• 二、跨域的解决方案
  • 1.CROS
  • 2.代理Proxy
  • 3.古老方案JSONP
• 总结

---

一、跨域的产生

跨域只出现在浏览器！
1.由于浏览器出于安全考虑，如果访问的链接不是同一个源，就会发生跨域。
举个🌰：

        比如你跑一个vue项目地址为：http://localhost:8080，
        现在你用一个axios请求后端的api地址为：http://192.169.x.xx:9527，那么在浏览器上必然会发生跨域，因为域名不同，端口号不同。

二、解决方案

1.CROS

即后端解决

2.代理Proxy

1.如果是基于vuecli脚手架搭建的工程直接配置devServer：

devServer:{
    proxy:{
        '/api':{
            target:'http://192.168.x.xx:9527',
            changeOrigin: true,
            pathRewrite: {
              ['^/api']: ''
            }
           }
    }
}

  这样只能在开发阶段可以解决跨域问题，但在生产环境上还需诸如nginx工具来解决跨域的问题

2.如果不依靠后端，nginx这种手段来解决跨域，另外一种手段就是自己搭建一个node中间件
 

const Koa = require('koa');
const request = require('./axios');
const app = new Koa();
const prot = 7400
app.use(async (ctx, next) => {
    console.log("访问");
    ctx.set("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 指定允许访问的域名
    ctx.set("Access-Control-Allow-Methods", "OPTIONS, GET, PUT, POST, DELETE");
    await next();
    const res = await request.getData("http://192.168.x.xx:9527") // 请求转发到后端
    ctx.body = res.data;
})
app.listen(prot, () => {
    console.log(`server is running at http://localhost:${prot}`)
})

这种方法直接解决了跨域问题，不过中间件需要前端自己来维护。

3.jsonp

这种方式就是定义一个方法，然后要求服务器返回一段调用定义好的方法，只能解决get请求，作为了解即可

 // 定义好一个方法
       function getData(data){
            console.log(data)
        }

        window.onload = function(){
            // 创建一个script标签   
            var script = document.createElement('script');
            // 设置标签的src属性，指向接口地址
            script.src = 'http://localhost:7400'; //假设这个地址返回一段js代码是getData({a:1,b:2})
            // 设置标签的type属性，指定返回的数据类型
            script.type = 'text/javascript';
            script.onload = function(){
                // 接口返回数据后，删除这个script标签
                script.remove();
            }
        }

---

总结

以上就是前端解决跨域的三种办法。