解决跨域 devServe vue.config.js

测试效果:如果你的后端小伙伴可以改尽量让后端改,改vue.config.js只作为开发测试

跨域问题

现在绝大多数公司的项目都是前后端分离的，前后端分离后势必会遇到跨域问题。如下图

注意此时并不是后端没有收到请求，而是收到请求了，也返回结果了，但是浏览器将结果拦截了，并且报错

 

同源策略

那么浏览器为什么会报错呢？

因为浏览器基于安全考虑而引入的同源策略

当协议+域名+端口三者都相同时，才不会产生跨域问题，即同源。此时才能读取到服务端的响应

如何解决跨域
虽然同源策略保证了安全，但一些合理的用途也会受到影响。

例如前端项目在a域名下发送一个Ajax请求到b域名，由于同源策略我们的Ajax请求会报错，导致不能正常请求接口

如果在浏览器直接打印不受跨域是吧!可以直接拿到数据,噢,那聪明的小伙伴,又是一个灵机一动,我吧它复制施展cv大法,我去请求JSON,恩恩,先不说,方便与否,如果1万行呢,也复制?所以不可取

解决跨域的方式有很多种，简单介绍2个

JSONP
JSONP主要是利用

 

 接口代理

在根目录下新建vue.config.js文件

//修改默认配置,配置跨域
module.exports = {
    //解决打包目录错误,
    publicPath: "./",
    devServer: {
        proxy: {
            "/api": {
                // http://www.sirfang.com/build/ajax_get_list这是完整路径,将com/后的路径重写路径为api
                // 1 目标路径 这里相当于公共的地址
                target: "http://m.sirfang.com",
                port: 9090, // 1.1端口号 默认的可以不配
                open: true, // 1.2运行项目自启
                //2 允许跨域
                changOrigin: true,
                // 是否代理websocket
                 ws: true, 
                //3 重写路径
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

在页面使用 重要的事说三遍 重启 重启 重启服务!!

我们的接口变成了8080 从本地发起的

 

简单说下及时通讯和http

例如:微信聊天 websockes可实现即时通讯