跨域

了解同源政策:所谓"同源"指的是"三个相同"。

  • 协议相同
  • 域名相同
  • 端口相同

解决跨域

  1. jsonp 缺点:只能get请求 ,需要修改B网站的代码
  2. cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容)。需要B网站在响应中加头
  3. postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容)。需要修改B网站的代码
  4. iframe window.name 传值得方式很巧妙,兼容性也很好。但是也是需要你能修改B网站代码
  5. 服务端主动请求B网站,兼容性好而且你客户端的代码还是原来的ajax,缺点是感觉不好。(服务器端是不存在跨域安全限制的)
  6. 类似5 用nginx把B网站的数据url反向代理。

node, express 解决跨域

  • 加上请求头:
1 app.all('*', (req, res, next)=>{
2 res.header("Access-Control-Allow-Origin", "*");
3 res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
4 res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
5 res.header("X-Powered-By",' 3.2.1')
6
7 if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
8 else next();
9 });

重点说一下vue-cli处理跨域

  • 前后端分离的项目,常常开发的时候,请求的接口地址存在跨域问题
  • webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
  • 首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:
 1 port: 8080,
2 proxyTable: {
3 '/api': {
4 target: 'http://www.ainyi.com', // 目标接口域名
5 changeOrigin: true, // 是否跨域
6 // secure: false, // 如果是https接口,需要配置这个参数
7 pathRewrite: {
8 '^/api': '' // 重写接口,一般不更改
9 }
10 },
11 },
  • '/api' 为匹配项,target 为被请求的地址
  • 以上代码表示:只要是http://www.ainyi.com/api的接口,都将被本地8080端口的请求代理:

    http://localhost:8080/api ===> http://www.ainyi.com/api

  • 也就是说,想请求接口http://www.ainyi.com/api,就是通过http://localhost:8080/api代理访问,就不会产生跨域。
  • 这样就不需要在axios配置axios.defaults.baseURL,所有接口都由本地代理了。

  

描述问题

项目中表格需要一些数据,于是前端自己写好了一个json文件,自己模拟后端请求接口,然后封装api,在自己的页面请求数据

封装api在部署时遇到的跨域问题

项目一般都分三种环境,开发测试生产,三个环境的ip或者域名是不一样的。这就需要咱们走不同的ip,之前是结合vue+webpack打包,配置哪个环境走哪个IP下面。第一次是部署到ip下面,我就把ip写成和地址栏一样的ip就不存在跨域问题了,相当于是在一个IP下,但是后端将ip重写为域名后又发生了跨域问题,一个ip对应四个域名,之前的方法自然不能采用,于是就把ip干掉,让他都走浏览器的当前域名就可以了。获取方法是var domain = document.domain;

json文件的写法和存放

{
"jobs": [{
"id": 1,
"name": "保险合伙人团队负责人",
"experience": "1年",
"number": "2人",
"duty": [
"组建并管理金融营销团队,负责员工的招聘、培训以及业务目标的设定与达成。",
"负责为高端个人客户和企业客户提供全方位理财咨询、建议服务,并制定相应的金融产品组合和投资理财策略。",
"通过与客户沟通,了解客户的理财需求,为客户进行测算并量身定制理财方案,达到客户满意。",
"根据客户的委托,帮助客户实施并签订(信托、证券、银行、保险)等理财产品的购买计划,完成并实施客户的理财需求。",
"负责对公司综合金融理财产品的全力宣传、推广、销售。",
"负责与公司原有的重要贵宾级客户保持良好的关系,通过与客户沟通,及时了解客户需求并调整客户的财务安排,减少客户流失。 ",
"建立和扩展客户网络,以探索新的业务机遇。",
"加强客户服务意识,成功发展客户的介绍来源,拓展客户渠道。",
"通过交叉销售、客户推荐、主动升级销售、个人业务关系等方式,获得新客户和拓展新的业务。"
],
"status": [
"25岁-45岁,本科及以上学历 (3年以上工作经验可大专学历)",
"具有一定的金融基础知识;",
"具有广泛的高端客户资源和金融营销经验;",
"具有较强的沟通能力和客户开发能力;",
"具有很强的工作责任心和良好的人际关系;",
"具有较强的团队合作精神,能承受一定的工作压力。",
"热爱金融销售工作,具备职业经理人形象,阳光、开朗、有激情,有朝气;有韧性;",
"有清晰的职业生涯规划,目标明确,勇于挑战自我,不甘平庸,追求高品质生活,渴望成功。",
"具备信托、证券、银行、保险、第三方理财机构等经验优先!",
"具备房地产、医疗、高尔夫、高端会所、会籍顾问等经验优先!"
],
"pay": [
"公司为员工提供完善优厚有竞争力的薪酬福利,多元化的收入来源(多达30项)上不封顶.。",
"初级销售经理年薪在10万-30万,",
"中级销售经理年薪在30万-80万,",
"高级销售经理年薪已达到80万-200万并向更高发展!"
]
}],
}

api封装的写法

var base = ${process.env.HOST}:${process.env.PORT}
const ApiSetting = {
news: /static/data/news.json,//这个直接直接浏览器域名走(相当于不用配置)
news: ${base}/static/data/news.json,//这个是之前分环境走打包
}
export default ApiSetting

页面调用的方法

<tr v-for="item in jobs">//html部分
<td>{{item.name}}</td>
<td>{{item.number}}</td>
<td>{{item.experience}}</td>
<td>
<router-link :to="{name: 'hiredetails',query: {id: item.id}}">查看详情 </router-link>
</td>
</tr> import ApiSetting from '@/api' //引入api created() {
this.$ajax.get(ApiSetting.news)//调用静态json文件
.then(res => {
console.log(res.data)
this.jobs = res.data.jobs
})
} 转载至:https://www.cnblogs.com/lml-lml/p/9438754.html
    https://www.cnblogs.com/ainyi/p/9335952.html

vue项目跨域问题的更多相关文章

  1. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

  2. 本地vue项目跨域服务器接口

    1,打开index.js文件,找到  proxyTable 参照下面链接的方法,你们可以去点赞 https://www.douban.com/note/704314260/?type=like#sep

  3. vue解决跨域问题

    vue解决跨域问题 vue跨域解决方法和小总结 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow ...

  4. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  5. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  6. VUE SpringCloud 跨域资源共享 CORS 详解

    VUE  SpringCloud 跨域资源共享 CORS 详解 作者:  张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...

  7. 基于Springboot后台,前台 vue.js 跨域 Activiti6 工作流(用到websocket技术) 的项目

    工作流模块----------------------------------------------------------------------------------------------- ...

  8. 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题

    在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...

  9. vue axios跨域

    现在应用都是前后端分离,这也造成前端在调用接口时出现跨域问题,在控制台会这样提示 ,如果有类似于此图的提示,就已经表明你的接口调用出现了跨域问题,此文章是我对于vue跨域其中一种方式的一些经验,如果错 ...

随机推荐

  1. POJ1046 Color Me Less

    题目来源:http://poj.org/problem?id=1046 题目大意: 在RGB颜色空间中,用下面的公式来度量两个颜色值的距离. 现给出16个RGB表示的颜色,和一些用于测试的颜色,求被测 ...

  2. 我在B站学习 清华大学教授带你学习c++(进阶)构造函数

    B站av11459203的一系列视频,跳过了基础篇直接进入进阶,从此难度开始加大.这里做出一些笔记分享一下. 我是1.25速度看的..对应分P 37-38 构造函数的作用 将对象初始化为一个特定的初始 ...

  3. 2017 ACM/ICPC Asia Regional Shenyang Online number number number

    题意:求n个斐波那契数列组合都无法得到的最小数字 解法: 1 我们先暴力的求出前面几个数字 2 然后再暴力的求递推 3 接着矩阵快速幂(没写错吧?) /*#include<bits/stdc++ ...

  4. grep 显示匹配行的上下n行

    grep -C 5 foo file 显示file文件中匹配foo字串那行以及上下5行grep -B 5 foo file 显示foo及前5行grep -A 5 foo file 显示foo及后5行

  5. Spark-2.4.0源码:sparkContext

    在看sparkContext之前,先回顾一下Scala的语法.Scala构造函数分主构造和辅构造函数,辅构造函数是关键字def+this定义的,而类中不在方法体也不在辅构造函数中的代码就是主构造函数, ...

  6. Soup协议-即普通post请求,内容域xml

    1.基础问题 1.1 soup-Simple Object Access Protocal简单对象访问协议 a).承载在http协议之上,http支持传输img/html/文件等,soup请求和响应域 ...

  7. Elasticsearch如何安装中文分词插件ik

    elasticsearch-analysis-ik 是一款中文的分词插件,支持自定义词库. 安装步骤: 1.到github网站下载源代码,网站地址为:https://github.com/medcl/ ...

  8. 图片单独上传 (word)

    Word.ApplicationClass wordApp=new ApplicationClass(); object file=path; object nullobj=System.Reflec ...

  9. shiro web环境初始化过程

    在web工程中使用shiro的时候需要配置一个shiro的listenser(EnvironmentLoaderListener)和一个shiro的filter(ShiroFilter). liste ...

  10. css清除浮动好方法

    1.clear:both ==>IE6,7会有高度,所以去高度需要.clear{ clear:both; height:0px; margin:0; padding:0; width:0; bo ...