vue项目跨域问题

跨域

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

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

解决跨域

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