There are two common solutions
Server-side solution
The server tells the browser: You allow me to cross domain
For details, please see:
// Tell the browser that only :9000 is allowed to request the server.$response->header('Access-Control-Allow-Origin', ':9000');
// Tell the browser that only these contents are allowed in the request header$response->header('Access-Control-Allow-Headers', 'Authorization, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, X-Requested-By, If-Modified-Since, X-File-Name, X-File-Type, Cache-Control, Origin');
// Tell the browser that only the two fields 'Authorization, authenticated' are allowed to be exposed$response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
// Tell the browser that only GET, POST, PATCH, PUT, OPTIONS methods are allowed to cross-domain request$response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
// Pre-check$response->header('Access-Control-Max-Age', 3600);
Write the above code to the middleware:
// /app/Http/Middleware/
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Response;
class Cors {
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle($request, Closure $next)
{
$response = $next($request);
// Tell the browser that only :9000 is allowed to request the server. $response->header('Access-Control-Allow-Origin', ':9000');
// Tell the browser that only these contents are allowed in the request header $response->header('Access-Control-Allow-Headers', 'Authorization, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, X-Requested-By, If-Modified-Since, X-File-Name, X-File-Type, Cache-Control, Origin');
// Tell the browser that only the two fields 'Authorization, authenticated' are allowed to be exposed $response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
// Tell the browser that only GET, POST, PATCH, PUT, OPTIONS methods are allowed to cross-domain request $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
// Pre-check $response->header('Access-Control-Max-Age', 3600);
return $response;
}
}
Add cross-domain middleware on the route and tell the client: the server allows cross-domain requests
$api->group(['middleware'=>'cors','prefix'=>'doc'], function ($api) {
$api->get('userinfo', \App\Http\Controllers\Api\UsersController::class.'@show');
})
Client-side solution
Spoofing the browser, making the browser feel that you are not cross-domain (actually, it is still cross-domain, using proxy)
Add the following code in:
//
"devServer" : {
"port" : 9000,
"disableHostCheck" : true,
"proxy": {
"/api/doc": {
"target": "",
"changeOrigin": true,
"secure": false
},
"/api2": {
.....
}
},
},
Parameter description
'/api/doc'
Capture the API flag. If there are these "/api/doc" strings in the API, then start matching the proxy.
For example, API request "/api/doc/userinfo",
Will be proxyed to the request "/api/doc"
That is: replace the matching "/api/doc" with "/api/doc"
The final request link surface of the client browser is: "http://192.168.0.104:9000/api/doc/userinfo",
In fact, it is proxyed as: "/api/doc/userinfo" to request data from the server
target
The proxy API address is the API address that requires a cross-domain.
The address can be a domain name, such as:
It can also be the IP address: http://127.0.0.1:9000
If it is a domain name, you need to add an additional parameter changeOrigin: true, otherwise the proxy will fail.
pathRewrite
Path rewriting, that is, it will modify the API path of the final request.
For example, the accessed API path: /api/doc/userinfo,
After setting pathRewrite: {'^/api' : ''},
The path to the final proxy access: "/doc/userinfo",
Replace "api" with regularity with empty string.
The purpose of this parameter is to name the agent and delete the name during access.
changeOrigin
This parameter allows the target parameter to be the domain name.
secure
secure: false, does not check for security issues.
After setting up, it can accept backend servers running on HTTPS and using invalid certificates
View document with other parameters
/configuration/dev-server/#devserver-proxy
Request for encapsulation
= function (url, data = {}, method = "GET") {
return new Promise((resolve, reject) => {
var type = 'application/json'
if (method == "GET") {
if (data !== {}) {
var arr = [];
for (var key in data) {
(`${key}=${data[key]}`);
}
url += `?${("&")}`;
}
type = 'application/x-www-form-urlencoded'
}
var access_token = ('access_token')
('token:',access_token)
var baseUrl = '/api/doc/'
({
url: baseUrl + url,
method: 'GET',
data: data,
header: {
'content-type': type,
'Accept':'application/x..v1+json',
'Authorization':'Bearer '+access_token,
},
success: function (res) {
if () {
resolve()
} else {
("Request failed", res)
reject(res)
}
},
fail: function (res) {
("Failed to initiate a request~")
(res)
}
})
})
}
Request Example:
//Get user information("userinfo",{},'GET')
.then(res => {
=
=
});
This is the article about detailed explanation of cross-domain problem solutions for vue or uni-app. For more related cross-domain problem solutions for vue or uni-app, please search for my previous articles or the related articles below. I hope everyone will support me in the future!