vue-cli3 中跨域解决方案

时间: 2019-04-09阅读: 4001标签: 跨域

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批)

前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。


0:前提条件

1:安装vue-lic

2:安装axios  用于发送请求。

 

1:将任何未知请求转发到代理服务器

如:

前端地址:127.0.0.1

后端地址:127.0.0.2

当访问地址为 127.0.0.1/api,没有匹配到这地址,那么就会被转发到代理服务器127.0.0.2/api

module.exports={
    devServer:{
        proxy: "http://www.acfun.cn"
    }
}

2:多代理控制

更多代理服务配置项搜索http-proxy-middleware查看

module.exports = {
    devServer: {
        proxy: {
            '/search': {    // search为转发路径
                target: 'http://www.acfun.cn',  // 目标地址
                ws: true, // 是否代理websockets
                changeOrigin: true   // 设置同源  默认false,是否需要改变原始主机头为目标URL,               
            }
        }
    }
};

如:

当前访问地址为  xxx.xxx.xxx/search时,就会被转发到代理服务器http://www.acfun.cn/search

xxx.xxx.xxx/search -> http://www.acfun.cn/search

 

3:实例

api.js 文件(主要用于全局配置)

import Axios from "axios";

let http = Axios.create({
    timeout: 3000,   //超时配置 3秒
    responseType: 'json',   // 响应数据格式
    responseEncoding: 'utf8',  // 响应数据编码
});

export default http;

入口文件  main.js

import vue from "vue";
import App from "./App.vue";
import router from "./router";
import http from "./api";   // 引用axios全局配置

vue.config.productionTip = false;

vue.prototype.$http = http;   // 添加原型方法,这样创建的对象就自带该方法了。

new vue({
    router,
    render: h => h(App)
}).$mount("#app");

vue.config.js 配置文件

更多代理服务配置项搜索http-proxy-middleware查看

module.exports = {
    devServer: {
        proxy: {
            '/search': {
                target: 'http://www.acfun.cn',
                ws: true,//是否代理websockets
                changeOrigin: true   // 设置同源  默认false,是否需要改变原始主机头为目标URL
            }
        }
    }
};

然后在vue实例对象中直接访问$http方法就行。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/2773

使用CSS3特性做跨域,跨域还可以这样玩

利用js动态创建一个link插入到文档中, 请求css文件,利用 computedStyle = window.getComputedStyle 获取指定元素的 style 对象,利用 computedStyle .content 获取内容

你应该了解的CORS

如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作

总结解决跨域的几个方法

跨域:指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 javascript 施加的安全限制。同源策略:是指协议,域名,端口都要相同

CORS跨域请求

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:DOM同源策略、XmlHttpRequest同源策略。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

JavaScript跨域问题总结

CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败

nginx 反向代理处理跨域问题

正向代理是你发出请求的时候先经过代理服务器,所以实际上发出请求的是代理服务器。反向代理是“代理你的目标服务器”,请求目标服务器的代理,做一些处理后再真正请求。在这篇文章里,反向代理用于处理跨域问题。

js跨域访问问题

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。如果进行跨域访问

web网站ajax跨域方法总结与解决方案

web前端的同学如果使用ajax,如果请求后端地址和页面访问的地址“URL的首部”不同就会出现访问被拒绝的情况,这就需要跨域来解决前后端的通讯问题,下面将列举一些在实际项目中应用也是比较多的方法。

JSONP跨域请求数据的三种方式

原生方式需要定义一个回调函数,用来接收和处理数据。获取数据的地址包含这个回调函数名。新建一个<script>标签,地址赋值给标签的src。

Vue开发环境跨域访问

Vue开发环境跨域访问其他服务器或者本机其他端口,需要配置项目中config/index.js文件,修改如下,这样你通过axios 或fetche访问 /api/** 便相当于跨域访问了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广