前端如何解决跨域

一：最老的技术Jsonp

1.1）去创建一个 script 标签

1.2）script 的 src 属性设置接口地址

1.3）接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。

1.4）通过定义函数名去接收后台返回数据

//去创建一个 script 标签
var script = document.createElement("script");
//script 的 src 属性设置接口地址 并带一个 callback 回调函数名称
script.src = "HTTP://127.0.0.1:8888/index.php?callback=jsonpCallback";
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据 function jsonpCallback(data){
//注意 jsonp 返回的数据是 json 对象可以直接使用
//Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。

二：需要后端合作的CORS

最简单的设置 但是需要配合

服务器设置 Access-Control-Allow-OriginHTTP 响应头之后，浏览器将会允许跨域请求

三：服务器代理--Proxy

在vue.config.js下配置  开发的时候使用 上线就必须要在同一个服务器

modlue.exports = {
    .....
    devServer: {
    host: '127.0.0.1',
    port: 8084,
    open: true,// vue项目启动时自动打开浏览器
    proxy: {
    '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
    target: "http://xxx.xxx.xx.xx:8080", //目标地址，一般是指后台服务器地址
    changeOrigin: true, //是否跨域
    pathRewrite: {    // pathRewrite 的作用是把实际Request Url中的'/api'用""代替
    '^/api': ""}
             }
         }
     }
}