精华内容
下载资源
问答
  • 最近在自己写前后端分离项目,前台用 vue ,后台用 PHP 框架写接口(PhalApi),然后在 vue 中用 axios 调用 PHP 的接口,遇到了跨域请求的问题,在网上了找了各种解决方法,结果就是没解决了,最后还是自己捣鼓出来...

    最近在自己写前后端分离的项目,前台用 vue ,后台用 PHP 框架写接口(PhalApi),然后在 vue 中用 axios 调用 PHP 的接口,遇到了跨域请求的问题,在网上了找了各种解决方法,结果就是没解决了,最后还是自己捣鼓出来了,主要是因为我在修改 vue 项目中的 config/index.js 文件中这个配置时就是不好使,所以才不得已用的别的方法。

    vue index.js 配置.png

    你如果查询 axios 跨域的话应该也是这个方法,具体我就不解释了,然后我不管怎么设置,这个配置就是不好使,真的是把你气死,没办法,幸亏我是自己开发前后台,所以我还有第二种解决方法,就是从后台下手,我用的是

    Phal 框架,然后我就用设置请求头的方式解决了这个问题

    在项目的主入口文件中加入以下这行代码;

    /public/index.php

    // 设置允许 http://172.24.42.65:8000 这个地址跨域请求

    header('Access-Control-Allow-Origin:http://172.24.42.63:8080');

    因为我是在本地开发,一开始我设置的是

    header('Access-Control-Allow-Origin:http://localhost:8080');

    但是这个函数好像不会解析 localhost 所以我就替换成了 IP 地址,然后 vue 端的配置文件中,我也把服务器的默认打开端口从 localhost 改成了 172.24.42.63

    /config/index.js

    vue 服务器端口设置.png

    这个时候我在执行 axios 请求就不会有跨域的问题了,开心的一批。

    然后上面这种做法只能解决 axios 发送普通的 get 请求时遇到的问题,如果我们要发送 post 请求,这时还是不可以的,你会发现你会遇到下面这个提示

    axios 跨域问题.png

    Failed to load http://localhost:8888/?s=User.saveAddress: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response

    这里我们有两种解决方法,分别是前端和后端

    先说前端:

    我们在发送 axios 请求的时候,需要设置一下我们的请求头,也就是下面这个东东

    axios({

    headers: {

    'Content-Type':'application/x-www-form-urlencoded'

    }

    });

    成功解决

    跨域成功.png

    再说后端:

    后端的话你就需要在 Phal 框架入口的地方再设置一下这个东东

    /public/index.php

    header('Access-Control-Allow-Headers:content-type');

    成功解决

    跨域成功.png

    你以为这就万事大吉了,NO,NO,NO,那说明少年你还是太天真,让你感受一下啥叫不认真学习的后果,接下来你又会遇到这个问题

    axios post 发送请求.png

    纳尼,我辛辛苦苦的弄了半天,你告诉我参数没有接收到??????

    然后本猿就开始了各种捣鼓,百度,最终发现是自己 axios 传输参数的时候有问题, 一开始我是这个传输 post 参数的

    axios({

    url: '/s=User.saveAddress',

    method: 'post',

    data: {

    user_id: 1,

    username: 'haha'

    },

    headers: {

    'Content-Type':'application/x-www-form-urlencoded'

    }

    })

    .then(response=>{

    console.log(response.data)

    })

    乍一看仿佛并没有什么问题,本猿还去查看了以下别人的代码,感觉和我都差不多,然后,它就是死活都传不过去,我的天,此时此刻仿佛有无数的 ret:400 在我眼前围绕,真是无比酸爽。

    最终我看翻看某位大神的博客里发现了一些不同,这都是自己以前留下的帐,之前没好好学,现在就找上门来了,

    这里我们因为用的是 application/x-www-form-urlencoded 这种编码,也就是说我们只需要在前台把数据处理好

    就行了,不需要后台再去处理了,让我们把刚才的代码改造一下

    const qs = require('qs');

    const data = {

    "User_id" : 1,

    "Phone" : addressInfo.phone,

    "Address" : addressInfo.address,

    "Username" : addressInfo.username

    }

    axios({

    url:'/?s=User.saveAddress',

    method: 'post',

    data: qs.stringify(data),

    headers:{

    'Content-Type':'application/x-www-form-urlencoded'

    }

    })

    .then(response=>{

    console.log(response.data);

    })

    这里我们引入了 qs 这个模块,然后用它的功能 qs.stringify(data) 然后再传输数据,这样后台就能解析我们传的值了,问题完美解决,累死了。

    展开全文
  • Jhipster默认对跨域的支持   但是要怎么用,还是看你了....   ...简单一点说明就是,不同服务器之间进行接口调用.   如何跨域   CORS是一个W3C标准,全称是"跨域资源共享"...

    Jhipster默认对跨域的支持

     

    但是要怎么用,还是看你了....

     

    什么是跨域

    浏览器的同源策略导致了跨域.

    同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

     

    为什么要跨域

    简单的一点说明就是,不同的服务器之间进行接口调用.

     

    如何跨域

     

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)跨域资源共享 CORS 详解。看名字就知道这是处理跨域问题的标准做法。CORS有两种请求,简单请求和非简单请求。\

     

     

    JHipster的跨域解决方案:

     

    JHipster中给的配置文件为:

    jhipster:
        http:
            version: V_1_1 # To use HTTP/2 you will need SSL support (see above the "server.ssl" configuration)
        # CORS is only enabled by default with the "dev" profile, so BrowserSync can access the API
        cors:
            allowed-origins: "*"
            allowed-methods: GET, PUT, POST, DELETE, OPTIONS
            allowed-headers: "*"
            exposed-headers:
            allow-credentials: true
            max-age: 1800

     

    使用注入bean的方式,来进行对url path的拦截

     

        @Bean
        public CorsFilter corsFilter() {
            UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
            CorsConfiguration config = jHipsterProperties.getCors();
            if (config.getAllowedOrigins() != null && !config.getAllowedOrigins().isEmpty()) {
                log.debug("Registering CORS filter");
                source.registerCorsConfiguration("/**", config);
                source.registerCorsConfiguration("/v2/api-docs", config);
            }
            return new CorsFilter(source);
        }

    cors中对需要传入的是path路径...

    这里就是有个坑....

     

    使用原生的JHipster的构建的框架中.register拦截的路径是/api/**,即/api下所有的目录及子目录,而我们在写接口的时候,接口名称是不会添加/api,而是直接写简单的业务名称来区分不同的接口名称,这也就是说.我们注册拦截的需要进行跨域的是/api/**下所有的接口,而我们写的接口不在这个目录下面,所以就会出现接口不满足跨域的问题...

     

    改为/**后就是对所有的接口路径进行拦截....

     

    TIPS

    /** 的意思是所有文件夹及里面的子文件夹

    /*  是所有文件夹,不含子文件夹(如果在某个请求下的子文件夹请求就不会拦截,很多ajax都不会被拦截)

    /   是web项目的根目录

     

    如果我们只需要对某个特定的接口名称进行跨域操作,只需要更改path的这个匹配路径即可....

    如/api/cors/*    只允许有三层,且前两层是/api/cors

    /api/cors/**      至少有三层,且前两层是/api/cors

     

     

    如果是简单的springmvc项目(springboot或者ssm等框架的)

    1,可以通过直接注入cors的configuration来实现

     

    package com.trs.idap.config;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
    
    /**
     * Created by Administrator on 2019/2/12.
     * 描述:
     *
     * @author Young
     * @create 2019-02-12 15:58
     */
    @Configuration
    public class CorsConfig extends WebMvcConfigurerAdapter {
        static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                .maxAge(3600);
        }
    }
    

     

    2,可以在方法上或者类上直接添加注解

    @CrossOrigin(origins = "*", maxAge = 3600)

    实现跨域操作

     

     

     

    展开全文
  • 如何用Nginx解决前端跨域问题?前言在开发静态页面时,类似Vue应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。最简单的解决方法,就是把浏览器设为忽略安全问题,...

    f3852c49e7d06c4112338f14b9bc824d.png

    如何用Nginx解决前端跨域问题?

    前言

    在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。

    最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。不过这种方式开发PC页面到还好,如果是移动端页面就不行了。

    解决办法

    使用Nginx转发请求。把跨域的接口写成调本域的接口,然后将这些接口转发到真正的请求地址。

    举个栗子

    例如我们在开发一个Vue应用。

    原先:

    调试页面是:http://192.168.1.100:8080/

    请求的接口是:http://ni.hao.sao/api/get/info

    步骤一:

    请求的接口是:http://192.168.1.100:8080/api/get/info

    PS:这样就解决了跨域问题。

    步骤二:

    安装好Nginx后,去到/usr/local/etc/nginx/目录(这是Mac的),修改nginx.conf文件。

    步骤三:

    把默认的server配置注释掉。

    在下面增加:server{

    listen 8888;

    server_name 192.168.1.100;

    location /{

    proxy_pass http://192.168.1.100:8080;

    }

    location /api{

    proxy_pass http://ni.hao.sao/api;

    }

    }

    保存后,启动Nginx。

    PS:并不需要太了解Nginx的配置,很简单的。

    步骤四:

    访问:http://192.168.1.100:8888/

    搞定。

    PS:注意访问的端口是‘8888’,有其他域的地址继续加location就行了。

    错误示范

    我一开始不太懂Nginx的配置,以为可以如下配置。server{

    listen 8080;

    server_name 192.168.1.100;

    location /api{

    proxy_pass http://ni.hao.sao/api;

    }

    }

    之所以这么写,是我认为这样可以让Nginx帮我监听8080的请求,然后只转发匹配的请求。我没有意识到的是Nginx这么写后,是需要占用8080端口的。

    既然需要占用端口,那也就不能再被其他相同协议的进程占用,就导致开发的页面无法以8080端口启用。经同事提点,才想起这事情,换下思路,就有了最上面的方法。

    总结

    其实不仅是在开发调试时候能这么干,在生产环境也能这么玩。利用Nginx转发请求之后,就能够让所要部署的静态页面不需要放在跟请求接口同域的地方。

    附录

    如果发现请求出现问题,且发现是Nginx的报错,那只需要找到Nginx的error.log,就可以知道原因。

    前提需要在nginx.conf配置error.log:error_log logs/error.log;

    error.log在Mac的位置:/usr/local/Cellar/nginx/1.15.8/logs/error.log

    更多Nginx相关知识,请访问Nginx使用教程栏目!

    展开全文
  • 同源策略禁止读取位于 https://************/login 远程资源。(原因:CORS 头 'Access-Control-Allow-Headers' 中令牌 'multipart/...但其他浏览器,如360、猎豹等就可正常解析实现跨域。想问下这是怎么回事???
  • react跨域问题怎么解决?如果接口地址为: http://my.example.com/eg-api 则配置package.json中proxy代理服务器如下:"proxy": {"/eg-api": {"target": "http://my.example.com","changeOrigin": true,"secure": ...

    react跨域问题怎么解决?

    如果接口地址为: http://my.example.com/eg-api 则配置package.json中的proxy代理服务器如下:"proxy": {

    "/eg-api": {

    "target": "http://my.example.com",

    "changeOrigin": true,

    "secure": false

    }

    }

    如果想调用多个不同域的接口,则配置如下:"proxy": {

    "/eg-api01": {

    "target": "http://my.example.com",

    "changeOrigin": true,

    "secure": false

    },

    "/eg-api02": {

    "target": "http://her.example.com",

    "changeOrigin": true,

    "secure": false

    }

    }

    补充:

    跨域这个问题,是纯前端无法解决的。

    1、JSONP处理跨域,一般这个方法是为了兼容老版本ie,因为ie9及以下不能使用CORS,而JSONP也需要后台支持才可以。

    2、服务器做重定向,或者代理,或者穿透等等技术,这些都超越了前端的能力范围。

    3、XMLHttpRequest。需要和后台进行请求头设置,具体方法可以百度

    综上所述,跨域问题与框架无关,也不是前端能独立解决的。

    本文来自React答疑栏目,欢迎学习!

    展开全文
  • 故事背景前端用 vue + axios, 后端用是 ko2,用 koa-passport + passport-local 帮我处理登录注销,用 koa-generic-session 处理session, koa2-cors 处理跨域问题描述今天做登录时候,发现 接口调用正常,...
  • 公司做网站H5和后台分离,只调用接口,必须解决H5跨域问题。 网上百度没有很详细, 带附件帖子在自己这永远运行不起来很头疼,然后看到一篇帖子,说还算清楚,但是不怎么详细。 本次事列使用VS2015 ...
  • 可是在前端人员调用接口的时候,怎么调也没有返回值。 后来知道,这是因为e前端 用 ajax 调用 后端接口 跨域不被允许。解决方法其实也很简单,只要在controller层接口函数上加上注解@CrossOrigin(origins = ...
  • 跨域,就是浏览器实行一种保护措施,例如,你网站网址是 www.1234.com 那么你在这个网站里用javascript 调用其他网站中的接口,就会报跨域问题,记住,只要不是www.1234.com就会报跨域问题。还有就是相同域名...
  • https 怎么调用后端...公司官网在前几天就只是一个域名,还没有部署SSL证书,vue访问已经在远程服务器上打包好后台接口也是用 http://47.242.xxx.xx:8888/file 访问跨域已经解决了,可以获取到数据。 但是
  • 前端:vue,在hbuilder上编写。...包括跨域配置(本就写好了,不然pc端也不可能访问),服务代理(看到很多都是说这样处理,但是我弄到一半后就不知道怎么弄了,小白。重要:个人不认为是这个原因),在尝...
  • 前端:vue,在hbuilder上编写。...包括跨域配置(本就写好了,不然pc端也不可能访问),服务代理(看到很多都是说这样处理,但是我弄到一半后就不知道怎么弄了,小白。重要:个人不认为是这个原因),在尝试修改ip和...
  • html5跨域访问接口或者一般处理程序

    千次阅读 2017-07-14 16:23:06
    本人于最近设计到项目中碰到拉html5 跨域的问题。需要在html5中调用写好webservice接口。出现错误 然后就是好纠结,然后网上百度。。。 百度到基本就是三种解决方法,第一种就是:使用代理,这个我没太明白...
  • 我想使用ajax调用百度短链接接口,要求post方法,返回json数据格式。但是会出现跨域的问题,用jsonp话数据格式会出错,请问这个要怎么解决
  • Html调用分布式http API接口方法

    千次阅读 2011-10-21 04:11:28
    很多开发者在开发html同时使用js时候总是碰到跨域的问题,笔者使用IFRAME标签比较土方法来解决这个问题。   2.问题和目的:  问题:在一个页面里现在同时包含了2个不同域页面XMapEngine.html 和 index....
  • 这种只要跟着api文档走就行了,做的时候不断总结api文档,然后把api文档给前端和后端人员看,看看自己需要去调用的接口是什么。 2.前端页面先开发好,后端对应前端页面进行开发。前端页面先行一步开发好,然后后端的...
  • jsonp跨域访问服务

    2014-07-02 08:30:42
    前段时间在做产品开发时候,需要与...所以采用在服务端通过webservice方式进行调用网站接口问题也很快解决了,当时我就在想如果需要在js中直接访问话,就涉及到到跨域的问题,那么怎么做才能解决这个问题呢...
  • 尤其是当一台服务器从后端返回的数据暂时不能调整响应头导致的跨域问题,跟大家分享几种跨域调试的办法。 概念 讲清楚解决问题之前,先讲讲问题的产生原因(有基础的可以跳过这段)。 前端处于安全考虑,禁止向其他...
  • 故事背景前端用 vue + axios, 后端用是 ko2,用 koa-passport + passport-local 帮我处理登录注销,用 koa-generic-session 处理session, koa2-cors 处理跨域问题描述今天做登录时候,发现 接口调用正常,...
  • 答:遇到过,一般情况都是ajax请求的跨域问题,常用的解决方式有两种,一种是jsonp,就是通过创建script标签请求一个http接口,但是这种方式必须是get请求且后端必须与前端商量好一个调用方式,第二种是w3c推荐的方式...
  • 面试总结

    2019-06-30 13:00:53
    1你是怎么解决跨域问题的? 什么是跨域? 跨域是浏览器同源策略引起。是指页面所请求url地址必须与浏览器url地址处于同域上(域名、端口、协议相同)。这是为了防止某域名下的接口被其他不同域网页非法...
  • vue 多源数据怎么处理

    2020-08-28 16:20:15
    需要固定ip+端口,进行重定向使用,可能会出现跨域问题,一般跨域后台解决 两个步骤: 1、将这个文件在main.js中引用,在该代理下的接口进行调用 2、在文件中调用,在后台提供的接口中前增加 小白无奈,...
  • 然后怎么样才能解决这个404问题正常调用接口解决跨域请求呢?求大佬指教! ======================================= 补充一下: 前端服务访问地址:localhost:8080 在我启动nginx后,访问localhost是能出现我...
  • 答:遇到过,一般情况都是ajax请求的跨域问题,常用的解决方式有两种,一种是jsonp,就是通过创建script标签请求一个http接口,但是这种方式必须是get请求且后端必须与前端商量好一个调用方式,第二种是w3c推荐的方式...
  • 怎么解决,求大神帮帮小弟 这是vue配置跨域的地方 地址是用类似花生壳一个工具映射 ``` proxyTable: { '/user': { target: 'http://wangzz.free.idcfengye.com/login', // 你请求第三方接口 ...
  • 4.3.6 在jdk1.5中,引入了泛型,泛型存在是用来解决什么问题。 4.3.7 这样a.hashcode() 有什么用,与a.equals(b)有什么关系。 4.3.8 有没有可能2个不相等对象有相同hashcode。 4.3.9 Java中HashSet内部...
  • 第07节、使用HttpClient转发请求解决跨域问题 第08节、什么是表单重复提交 第09节、使用Token解决表单重复问题 资料+源码.rar 0018-蚂蚁课堂(每特学院)-2期-Linux开发001 第01节、XSS攻击流程与钓鱼网站概述 第02节...
  • 初学者学Java常遇到的问题,我都给你回答了! Java学习路线 学完SSM,该学什么呢? 泛型就这么简单 注解就这么简单 Object对象你真理解了吗? JDK10都发布了,nio你了解多少? Java 程序员都需要懂 反射! COW奶牛...
  • APP端不存在跨域问题,直接配置全域名或ip地址即可 /** * ip地址或域名 */ const ipAddress = 'http://localhost:8080' // 文件访问地址 const fileAddr = 'http://localhost:8082/fileUpload/' /** * api前缀 ...

空空如也

空空如也

1 2
收藏数 35
精华内容 14
关键字:

怎么解决接口调用的跨域问题