Nginx+ThinkPHP+Vue解决跨域问题的方法详解

🕗 发布于 2024-11-12 11:57 android

解决过程主要有两个步骤。

1.nginx配置允许跨域

在你部署的网站对应的端口配置文件里设置，我的目录结构是这样的：

server {
listen 8080;
server_name localhost;
root "D:/phpstudy_pro/WWW/admin/landpage_server/public";
location / {
index index.php index.html error/index.html;
error_page 400 /error/400.html;
error_page 403 /error/403.html;
error_page 404 /error/404.html;
error_page 500 /error/500.html;
error_page 501 /error/501.html;
error_page 502 /error/502.html;
error_page 503 /error/503.html;
error_page 504 /error/504.html;
error_page 505 /error/505.html;
error_page 506 /error/506.html;
error_page 507 /error/507.html;
error_page 509 /error/509.html;
error_page 510 /error/510.html;
include D:/phpstudy_pro/WWW/admin/landpage_server/public/nginx.htaccess;
autoindex off;
}
location ~ \.php(.*)$ {
fastcgi_pass 127.0.0.1:9002;
fastcgi_index index.php;
fastcgi_split_path_info ^((?U).+\.php)(/?.+)$;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
fastcgi_param PATH_TRANSLATED $document_root$fastcgi_path_info;
include fastcgi_params;
}

# 添加跨域配置
location / {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
}
}

不过这有个坏处，就是每次你重启的时候就会被默认配置覆盖。所以这里有第二种办法：

或者在你的ThinkPHP项目的 nginx.htaccess 文件里配置。（我通过小皮将网站部署后会自动生成这个文件），上面那个文件会把这个配置文件引入进来。 include D:/phpstudy_pro/WWW/admin/landpage_server/public/nginx.htaccess;

#伪静态配置
location / {
    index  index.html index.htm index.php;
    autoindex  off;
    if (!-e $request_filename) {
        rewrite  ^(.*)$  /index.php?s=/$1  last;
        break;
    } 
}


 # 添加跨域配置
        location / {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            if ($request_method = 'OPTIONS') {
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
                add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
                add_header 'Access-Control-Max-Age' 1728000;
                add_header 'Content-Type' 'text/plain charset=UTF-8';
                add_header 'Content-Length' 0;
                return 204;
            }
 }

worker_processes 1;

events {

worker_connections 1024;

}

http {

include mime.types;

default_type application/octet-stream;

sendfile on;

server {

listen 80;

# 域名

server_name localhost;

# 服务器根目录

root H:\php\project\UserManager\public;

# 默认读取的文件

index index.php index.html index.htm;

location / {

# 允许浏览器跨域请求

if ($request_method = 'OPTIONS') {

add_header Access-Control-Allow-Origin '*';

add_header Access-Control-Allow-Headers '*';

add_header Access-Control-Allow-Methods '*';

add_header Access-Control-Allow-Credentials 'true';

return 204;

}

if (!-e $request_filename) {

rewrite ^(.*)$ /index.php?s=/$1 last; break;

}

try_files $uri $uri/ /index.php?$query_string;

}

# 监听127.0.0.1:9000端口，要和php-cgi.exe配置的ip:端口一致

location ~ \.php$ {

fastcgi_pass 127.0.0.1:9000;

include fastcgi_params;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

}

其中的“允许浏览器跨域请求”是关键点，因为浏览器在发现网页请求是跨域请求时，会再发送一个OPTIONS请求，只有这个请求成功了才会允许跨域请求，此时，要强行配置允许跨域。（这里配置的是允许全部请求跨域）

2.在ThinkPHP中允许跨域

编辑middleware.php文件

<?php

// 全局中间件定义文件

return [

//允许跨域

//\think\middleware\AllowCrossDomain::class

\app\middleware\AllowCrossDomain::class

// 全局请求缓存

// \think\middleware\CheckRequestCache::class,

// 多语言加载

// \think\middleware\LoadLangPack::class,

// Session初始化

// \think\middleware\SessionInit::class

];

<?php

declare (strict_types = 1);

namespace app\middleware;

use Closure;

use think\Config;

use think\Request;

use think\Response;

/**

* 跨域请求支持

*/

class AllowCrossDomain

{

protected $cookieDomain;

protected $header = [

'Access-Control-Allow-Credentials' => 'true',

'Access-Control-Max-Age' => 1800,

'Access-Control-Allow-Methods' => 'GET, POST, PATCH, PUT, DELETE, OPTIONS',

'Access-Control-Allow-Headers' => 'Token, Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With',

];

public function __construct(Config $config)

{

$this->cookieDomain = $config->get('cookie.domain', '');

}

/**

* 允许跨域请求

* @access public

* @param Request $request

* @param Closure $next

* @param array $header

* @return Response

*/

public function handle($request, Closure $next, ? array $header = [])

{

$header = !empty($header) ? array_merge($this->header, $header) : $this->header;

if (!isset($header['Access-Control-Allow-Origin'])) {

$origin = $request->header('origin');

if ($origin && ('' == $this->cookieDomain || strpos($origin, $this->cookieDomain))) {

$header['Access-Control-Allow-Origin'] = $origin;

} else {

$header['Access-Control-Allow-Origin'] = '*';

}

return $next($request)->header($header);

}

到此这篇关于Nginx+ThinkPHP+Vue解决跨域问题的方法详解的文章就介绍到这了,更多相关Nginx ThinkPHP解决跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家

原文地址：https://blog.csdn.net/nnmmbb/article/details/143691384

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：提升百度排名的有效策略与技巧解析
下一篇：linux平台,一、搭建Nginx服务器,二、用户认证,三、基于域名的虚拟主机,四、SSL虚拟主机

软考之面向服务架构SOA-通信方法
SOAP 是一种基于 XML 的协议，用于在分布式计算环境中交换结构化信息。它定义了一套标准的消息格式，可以通过各种网络协议（如 HTTP、SMTP）进行传输。REST 是一种基于 HTTP 协议的架
阅读更多2024-11-14
Python基础教程：文件操作
上述内容介绍了Python中文件操作的基本方法，包括使用`open()`函数打开文件、读取和写入文件、关闭文件以及使用`with`语句自动管理文件的打开和关闭。还提到了文件操作中可能遇到的异常处理。
阅读更多2024-11-14
24/11/13 算法笔记＜强化学习＞ DQN算法
DQN维护两个神经网络，一个是用于预测Q值的评估网络（Evaluation Network），另一个是用于生成目标Q值的目标网络（Target Network）。：在传统的Q学习中，需要维护一个Q表来
阅读更多2024-11-14
测试自动化如何和业务流程结合？
测试自动化框架固然重要，但是最终自动化的目的都是为了业务服务的。那测试自动化如何对业务流程产生积极影响？
阅读更多2024-11-14
通过微信测试公众号实现扫码登录
实现微信的扫码登录，向微信服务器发送请求，获取accesstoken和ticket，获取二维码，登录成功后会回调，发送模板信息
阅读更多2024-11-14
【2024最新】基于springboot+vue的闲一品交易平台lw+ppt
开发技术：SpringBoot、php、Python、小程序、SSM、Vue、MySQL、JSP、ElementUI等，。专栏推荐：SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小
阅读更多2024-11-14
java组件安全
默认端口：8983。
阅读更多2024-11-14
1111111111待修改--大流量分析（三）-BUUCTF
https://buuoj.cn/challenges#%E5%A4%A7%E6%B5%81%E9%87%8F%E5%88%86%E6%9E%90%EF%BC%88%E4%B8%89%EF%BC%89
阅读更多2024-11-14
DAY111PHP开发框架&THIKNPHP&反序列化&POP利用链&RCE执行&文件删除
函数方法file_exists，@unlink($filename);//$relation可控，找到一个没有visible方法或不可访问这个方法的类时，即可调用_call()魔法方法。1、__des
阅读更多2024-11-14
如何在OCI上配置并使用OCI GenAI服务的步骤
如何在OCI上配置并使用OCI GenAI服务的步骤
阅读更多2024-11-14