zoukankan      html  css  js  c++  java
  • laravel后端解决CORS跨域的问题(简单请求和复杂请求)

    开篇之前,在前几天做项目的时候出现的问题,OPTIONS说没有权限,无法进行请求,在前后端分离时,跨域出现的就比较棘手,今天我们就来解决这个问题

    什么是跨域

    跨域通俗易懂,就是两个不同的域名去取数据的时候就造成了跨域。假如说a.c.com提供的接口需要 b.c.com去调用的时候就是出现了跨域,或者根域名不同如a.c.com提供接口,d.com去调用的时候也属于跨域问题

    如何解决跨域问题

    基础的解决方法是使用jsonp,但是jsonp会有只能用GET请求的缺陷,所以现在的解决方法为CORS,详细内容请见阮一峰大神的CORS

    Laravel怎么解决呢?

    Laravel组件组件化开发的时候在composer中提供了cors的包QQ--20170926084702
    laravel-china推荐用第一个我,开始我用了第一个会出现这种问题,当我用GET、POST这种请求是没有问题,但是当我前端用vue里面去做前后端分离的时候出现了跨域的问题
    QQ--20170926085831
    OPTIONS没有被允许,查阅资料后发现,当不是简单请求时,就会进行OPTIONS预检,在这里没有处理。

    解决方法

    更换Laravel的CORS的包

    • 拉下来对应包
      composer require resultsystems/laravel-cors
    • 设置Provider
      config/app.php中的providers中添加
      ResultSystemsCorsCorsServiceProvider::class,
    • 设置Middlewares
      appHttpMiddlewareKernel.php$routeMiddleware中添加
      'cors' => ResultSystemsCorsCorsMiddleware::class,
      然后在$middlewareGroups中的api中添加'cors'
    • 执行命令配置cors域
      php artisan vendor:publish --provider="ResultSystemsCorsCorsServiceProvider"
      QQ--20170926091819
      里面*号指的是全部域名都支持,如果设置域名那么直接写域名就好
    • Nginx中的设置
      这里以Ubuntu为例进入虚拟主机配置文件
      cd /etc/nginx/sites-available/
      vim default
    location / {
    		# First attempt to serve request as file, then
    		# as directory, then fall back to displaying a 404.
    		try_files $uri $uri/ /index.php?$query_string;
    	     if ($request_method = 'OPTIONS') {
    	        add_header 'Access-Control-Allow-Origin' '*';
    	        #
    	        # Om nom nom cookies
    	        #
    	        add_header 'Access-Control-Allow-Credentials' 'true';
    	        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    	        #
    	        # Custom headers and headers various browsers *should* be OK with but aren't
    	        #
    	        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Authorization,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    	        #
    	        # Tell client that this pre-flight info is valid for 20 days
    	        #
    	        add_header 'Access-Control-Max-Age' 1728000;
    	        add_header 'Content-Type' 'text/plain charset=UTF-8';
    	        add_header 'Content-Length' 0;
    	        return 204;
    	     }
    	}
    

    然后nginx -s reload 重启大家就可以访问接口了
    他是在nginx去解决的options请求的问题。

  • 相关阅读:
    Python-asyncio
    Python-异步编程
    软件工程个人作业01
    《构建之法》阅读笔记6
    《构建之法》阅读笔记5
    《构建之法》阅读笔记4
    《构建之法》阅读笔记3
    《构建之法》第二章阅读笔记
    《构建之法》第一章阅读笔记
    开发web信息管理系统用到的相关技术
  • 原文地址:https://www.cnblogs.com/jhcyzxx/p/10479808.html
Copyright © 2011-2022 走看看